Angular JIT compilation failed: '@angular/compiler' not loaded

Question

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.

Getting this error when build production build in dev mode not getting any error

Answer 1

You could try any of the following solutions:

Solution 1

Run the following command to update all dependencies as their might have some incompatibilities:

npm update

Solution 2

Make sure you have already imported '@angular/compiler' at the very top of your main.ts file.

Now set the following line

aot=true 

in angular.json file.

Also, set the following line

scripts{
  "postinstall": "ngcc --properties es2015 browser module main --first- only --create-ivy-entry-points"
}

in package.json file and then delete node_modules folder and package-lock.json file and then run the following command:

npm install

Solution 3

Disable Ivy engine in tsconfig.json file:

"angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true, "enableIvy": false }

Answer 2

Late to answer this, but since this came up first on Google Search results, my fix could be helpful to someone else (might even help me in future ;) ).

If your app is using HttpClient for making any HTTP calls, probably you did similar mistake as me and imported HttpClient instead of HttpClientModule & ended up with the error message from question.

Simply replace the HttpClient with HttpClientModule in your imports array in @NgModule & add import the class.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
    declarations: [AppComponent, ProductListComponent],
    imports: [BrowserModule, FormsModule, HttpClientModule],
    bootstrap: [AppComponent],
})