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.7Description
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)
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’;
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:
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
andfesm2015
at the same time with thengcc
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 howIVY
andngcc
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.
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:
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!