angular-cli: Uncaught Error: Angular JIT compilation failed: '@angular/compiler' not loaded!

🐞 Bug report

This is probably a feature and not a bug. But I can’t find any useful information on how to fix it. I get no relevant hits on the error message itself, so I guess it’s fairly new ur really uncommon.

Command (mark with an x)

  • build

Is this a regression?

Yes, the previous version in which this bug was not present was: 9.0.0-rc.7

Description

A clear and concise description of the problem...

I’m building my app with Webpack and AngularCompilerPlugin. After compilation is done and I load the URL where the app is served I’m met with blank page the the following error:

Uncaught 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.

I’ve been using this code since Angular 5 or 6. So I have never been forced to understand what it actually does. Since I’m building with AngularCompilerPlugin it is to my understanding AOT and not JIT. So what does “Consider AOT mode instead.” mean in this case?

🔬 Minimal Reproduction

Since this is not an open source project it would take a lot of time to create a repro. I will gladly do this if it cannot be solved any other way. Just let me know.

main.ts

platformBrowserDynamic().bootstrapModule(AppModule)
    .then(module => {
        if (!environment.production) {
            const applicationRef = module.injector.get(ApplicationRef);
            const appComponent = applicationRef.components[0];
            enableDebugTools(appComponent);
        }
    })
    .catch(err => console.error(err));

webpack.config.ts

new AngularCompilerPlugin({
    tsConfigPath: helpers.rootPath('tsconfig.build.json'),
    mainPath: helpers.rootPath('src/main.ts'),
    sourceMap: true
}),

🔥 Exception or Error


angular.js:24565 Uncaught 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.
    at getCompilerFacade (angular.js:24565)
    at Function.get (angular.js:49779)
    at registerNgModuleType (angular.js:48055)
    at angular.js:48066
    at Array.forEach (<anonymous>)
    at registerNgModuleType (angular.js:48066)
    at new NgModuleFactory (angular.js:48173)
    at compileNgModuleFactory__POST_R3__ (angular.js:51698)
    at PlatformRef.push.../../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.PlatformRef.bootstrapModule (angular.js:51921)
    at eval (main.ts:19)

🌍 Your Environment


Angular CLI: 9.0.1
Node: 12.14.0
OS: win32 x64

Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@angular/http                     8.0.0-beta.10
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.5

Anything else relevant?

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 12
  • Comments: 48 (17 by maintainers)

Most upvoted comments

In my case I had this kind of problem because someone in project did reference to Injectable like below: import { Injectable } from ‘…/…/…/…/…/…/node_modules/@angular/core’;

Can you try including both es2015 and es5? I suspect that you have some packages that only have one or the other. So by not including them both, you end up with at least one unprocessed package.

I did run them one after the other, so they should both be there. I just got home. But I’ll answer any questions you have about the repro incase you get into any trouble. It’s a bit complex setup due to legacy stuff.

I added import '@angular/compiler'; in main.ts in-case you want to remove it and investigate the JIT-error.

This time I got really far. Stopped six levels down in the MaterialDesignModule on something called BidiModule: image

There really seems to be an issue with generating these ivy/ngcc files.

Edit: Finally got it to work after removing all the modules a third time and running the ngcc script once again. So all this debugging and all these weird issues was just a single source. Missing ivy_ngcc files.

It was probably due to the fact that I thought that I could generate fesm5 and fesm2015 at the same time with the ngcc script. It probably just chose one of them. Then web-lib-angular needed to compile all modules as es2015, at the same time as the apps running in parallel trying to do the es5. So all of them wanted to compile at the same. Once they had conflicts and failed, it looked like they had succeeded, so they didn’t try again. They skipped some of the files. After removing the @angular folder and running ngcc for both es5 and es2015 separately, before compiling the library and the apps it finally worked. I guess I got a involuntary crash course in how IVY and ngcc works. Not how I imagined my friday night though.

Anyone with this issue after 9.0.7 see this thread https://github.com/angular/angular/issues/35788#issuecomment-606455043

There’s a workaround fix commented, but they also said they’ll look into having an update probably next week that will help support packages with ESM5 format.

In my case I’ve just reload application and all works.

Thanks. Indeed by AOT being default with angular 9, you cannot change dependencies while serving.

I’m getting this issue but only after upgrading from angular 9.0.6 to 9.0.7, if I revert the issue goes away.

Have you tried running ngcc directly over the whole of node_modules? You might get some useful warnings about some of the entry-points. E.g. ngcc -l debug

This also occurs when you import only HttpClient instead of HttpClientModule, but it seems like this isn’t the case

@Teknyc: Yes. I added this:

"postinstall": "ngcc --properties es5 browser module main --first-only --create-ivy-entry-points && ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"

We need both es5 and es2015. Not sure about your needs. The main.ts file can stay the same as before. I the script above doesn’t work.

Make sure you remove the node_modules/@angular folder before installning again. If they are already installed and faulty, they will stay that way.

If it still doesn’t work you need to use DevTools (or similar) to understand which module isn’t wokring. They easiest way to do this is to set a breakpoint at the actual JIT error and just use the callstack to go up a few levels until you see anything related to a module. It will have the module name. In my example I wen’t to getNgModuleDef and from there I could figure out which modules caused the issue.

OK that works!