Rahul Kumar
Rahul Kumar

Reputation: 73

Angular 9 : NullInjectorError: No provider for CompilerFactory

Get the message when running the app in browser prod/aot mode. Below is my main-aot.ts

Uncaught NullInjectorError: StaticInjectorError(Platform: core)[CompilerFactory]: NullInjectorError: No provider for CompilerFactory!

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
//import { AppModuleNgFactory } from './app/app.module.ngfactory';
import { AppModule } from './app/app.module';

enableProdMode();

// tslint:disable-next-line:no-console
/*platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).catch(err => {
    console.log('CANNOT LOAD AOT MODULE')
    console.dir(AppModuleNgFactory);
    console.error(err)
});*/
platformBrowser().bootstrapModule(AppModule).catch(err => {
    console.log('CANNOT LOAD AOT MODULE')
    console.dir(AppModule);
    console.error(err)
});

Upvotes: 6

Views: 10032

Answers (5)

Cameron
Cameron

Reputation: 2965

Edit with Angular 13, the view engine is gone, and you will no longer need to run ngcc. It should just work.

Interestingly enough, the angular compatibility compiler (ngcc) will be ran behind-the-scenes when running the cli tools, but not when using the build tools directly.

This means you will probably find that when you are doing an ng build that it works fine. However, ng run build or just using the Angular's "architect" tool directly with some sort of build tool like Bazel, then you will need to run the ngcc command yourself.

@Parliaments postinstall trick should work. But just wanted to explain it more.

Upvotes: 1

Rui Marques
Rui Marques

Reputation: 8914

Instead of adding ngcc to your postinstall script, you can try to delete node_modules or just delete the installed Angular libraries and run npm install. This might also fix this issue.

In my particular case what seemed to happen is that one of the dependencies is an Angular library, those get compiled into a folder in node_modules. After updating from Angular 10 to 11 that compilation was probably cached but should be recompiled.

So both running ngcc or deleting node_modules and reinstalling the dependencies seem to fix the issue.

Upvotes: 1

Shimanyi Valentino
Shimanyi Valentino

Reputation: 483

I recently experienced a similar error : NullInjectorError: No provider for CompilerFactory! after on deploying my remote server. I had done an automated build which was building the dist/ using npm run build --prod changing this to ng build --prod worked for me!

Kindly check that your environments are running / building the application using similar tools.

Upvotes: 1

parliament
parliament

Reputation: 22934

I was getting this error because I was not running ```ngcc`` as now required with Angular 9 when Ivy is enabled. So to fix this I added the following to my package.json scripts:

"postinstall": "ngcc"

Then ran it:

npm run postinstall

Also, the following bootstrap code was sufficient, platformBrowserDynamic is not required with AOT enabled:

 platformBrowser().bootstrapModule(AppModule)

Upvotes: 13

Caro
Caro

Reputation: 650

In angular 9 with ivy, there are no ngFactory files anymore, you no longer need main-aot.ts, only main.ts should be necessary

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

Upvotes: 1

Related Questions