Uncaught (in promise): Error: Angular JIT compilation failed: '@angular/compiler' not loaded! in angular 9

Question

I create a webaite with angular 9 but i have a problem with angular .

In some route I have the error:

ERROR Error: Uncaught (in promise): Error: Angular JIT compilation failed: '@angular/compiler' not loaded!   - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.   - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?   - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping. Error: Angular JIT compilation failed: '@angular/compiler' not loaded!   - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.   - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?   - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping. 

But in some routes I do not have this error. Another weird thing is that in local it works fine but in server it did not work. What's the problem and how can I solve it?

In my server I place the put the files in the app folder, while in the local machine I don't have this folder.

Here is angular.json:

{     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",     "version": 1,     "newProjectRoot": "projects",     "projects": {         "avastar": {             "root": "",             "sourceRoot": "src",             "projectType": "application",             "prefix": "kt",             "schematics": {                 "@schematics/angular:component": {                     "style": "scss"                 }             },             "architect": {                 "build": {                     "builder": "@angular-devkit/build-angular:browser",                     "options": {                         "outputPath": "dist/avastar",                         "index": "src/index.html",                         "main": "src/main.ts",                         "polyfills": "src/polyfills.ts",                         "tsConfig": "src/tsconfig.app.json",                         "assets": [                             "src/favicon.png",                             "src/assets"                         ],                         "styles": [                             "src/styles.scss"                         ],                         "scripts": [                             "src/assets/vendors/global/vendors.bundle.js",                             "src/assets/js/demo1/scripts.bundle.js"                         ],                         "stylePreprocessorOptions": {                             "includePaths": [                                 "src",                                 "src/stylings/",                                 "src/stylings/base/",                                 "src/stylings/kt-customs/"                             ]                         },                         "es5BrowserSupport": true                     },                     "configurations": {                         "production": {                             "fileReplacements": [{                                 "replace": "src/environments/environment.ts",                                 "with": "src/environments/environment.prod.ts"                             }],                             "optimization": true,                             "outputHashing": "all",                             "sourceMap": false,                             "extractCss": true,                             "namedChunks": false,                             "aot": true,                             "extractLicenses": true,                             "vendorChunk": false,                             "buildOptimizer": true,                             "budgets": [{                                 "type": "initial",                                 "maximumWarning": "5mb",                                 "maximumError": "10mb"                             }]                         }                     }                 },                 "serve": {                     "builder": "@angular-devkit/build-angular:dev-server",                     "options": {                         "browserTarget": "avastar:build"                     },                     "configurations": {                         "production": {                             "browserTarget": "avastar:build:production"                         }                     }                 },                 "extract-i18n": {                     "builder": "@angular-devkit/build-angular:extract-i18n",                     "options": {                         "browserTarget": "avastar:build"                     }                 },                 "test": {                     "builder": "@angular-devkit/build-angular:karma",                     "options": {                         "main": "src/test.ts",                         "polyfills": "src/polyfills.ts",                         "tsConfig": "src/tsconfig.spec.json",                         "karmaConfig": "src/karma.conf.js",                         "styles": [                             "src/styles.scss"                         ],                         "scripts": [],                         "assets": [                             "src/assets"                         ]                     }                 },                 "lint": {                     "builder": "@angular-devkit/build-angular:tslint",                     "options": {                         "tsConfig": [                             "src/tsconfig.app.json",                             "src/tsconfig.spec.json"                         ],                         "exclude": [                             "**/node_modules/**"                         ]                     }                 }             }         },         "avastar-e2e": {             "root": "e2e/",             "projectType": "application",             "prefix": "",             "architect": {                 "e2e": {                     "builder": "@angular-devkit/build-angular:protractor",                     "options": {                         "protractorConfig": "e2e/protractor.conf.js",                         "devServerTarget": "avastar:serve"                     },                     "configurations": {                         "production": {                             "devServerTarget": "avastar:serve:production"                         }                     }                 },                 "lint": {                     "builder": "@angular-devkit/build-angular:tslint",                     "options": {                         "tsConfig": "e2e/tsconfig.e2e.json",                         "exclude": [                             "**/node_modules/**"                         ]                     }                 }             }         }     },     "defaultProject": "avastar" } 

Answer 1

If you are like me and wound up here from google. My error came when I included an Angular Material Component, rather than it's module in app.module.ts

special note: whenever you add a new material module to app.module.ts you must stop (and restart) ng serve or you will get this error.

change this

imports: [    BrowserModule,    HttpClientModule,    AppRoutingModule,    BrowserAnimationsModule,    MatDialog, // <====== this is the error ], 

to this

imports: [    BrowserModule,    HttpClientModule,    AppRoutingModule,    BrowserAnimationsModule,    MatDialogModule, // <====== this is the solution ],