Useful or not, from you.
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)

<!-- Can you pin-point the command or commands that are effected by this bug? --> <!-- ✍️edit: -->

  • [x] build

Is this a regression?

<!-- Did this behavior use to work in the previous version? --> <!-- ✍️--> 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

<pre><code> 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) </code></pre>

🌍 Your Environment

<pre><code> 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 </code></pre>

Anything else relevant? <!-- ✍️Is this a browser specific issue? If so, please specify the browser and version. -->

<!-- ✍️Do any of these matter: operating system, IDE, package manager, HTTP server, ...? If so, please mention it below. -->

That's a useful answer
Without any help

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.