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

[JonWallsten]

🐞 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 ()
    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?

[petebacondarwin]

I believe this error is a symptom that the Angular decorators (e.g. @Component etc) were not removed from the source code by the AOT compilation correctly...

This could be in your application source - or perhaps an ngcc failure in one of your dependencies?

Can you build the app and look in the generated output to see if that is the case?

[JonWallsten]

@petebacondarwin: I'll check. Give me a few minutes.
I'm using this to run ngcc:

 ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

However this does not include @angular/material for example. Is it possible to tweak the script to run on all relevant modules?

Edit: Sorry, all the "@"s I could find belonged to non-angular code, strings or comments.

Callstack

DevTools

[JonWallsten]

@petebacondarwin: I'll fix that repro.

[petebacondarwin]

If you could make a self-standing repro then I can look into it.

[JonWallsten]

If you could make a self-standing repro then I can look into it.

@petebacondarwin I couldn't reproduce it myself in the skeleton-repo I've made before. The only big difference between that one and our current is that I've created an internal lib with ng-packagr. Is there something I would have to do in the ng-packagr settings to make it work?

[petebacondarwin]

Does this internal lib have secondary entry-points? Is it related to #35188?

[JonWallsten]

@petebacondarwin Not that I know of. And I just updated our skeleton-repo to also include building the lib. It still works. So it's some other dependency causing this that I have stripped out in that repo.
Probably related to angular/angular#35045.

But how do I figure out which one? I'm prepared to do the digging. But what am I looking for?
I'm using a monorepo and import several internal packages that isn't using Angular at all. Could this fool the compiler somehow?

These are the external modules I import in my app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';

import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faSearch, faTimes, faBars, faCog, faCopy } from '@fortawesome/free-solid-svg-icons';

So I guess FontAwesome could be the issue here.

I imported @angular/compiler per the suggestion in the error message. That reveals another error.

So there might be some breaking change in @angular/material that I don't know about.

There's no fesm5 folder in the @angular/material/ivy_ngcc/ folder. Is that an issue?

[JonWallsten]

I think I get it now:
"ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
needs to be
"ngcc --properties es5 browser module main --first-only --create-ivy-entry-points"

After I did that I got bit further down the line. Now it stopped on:

And when I check there's no divider.js or divider.js.map in the fesm5 folder. But there is one in the fesm2015 folder. So it looks like ngcc just skipped it.

I removed that particular module to move on. Now I get this:

main.ts:27 Error: Component 'AppComponent' is not resolved:
 - templateUrl: ./app.component.html
 - styleUrls: ["./app.component.scss"]
Did you run and wait for 'resolveComponentResources()'?
    at Function.get (angular.js:80169)
    at getComponentDef (angular.js:55844)
    at verifyDeclarationsHaveDefinitions (angular.js:79852)
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (angular.js:79827)
    at Function.get (angular.js:79785)
    at getInjectorDef (angular.js:54379)
    at R3Injector.push.../../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.processInjectorType (angular.js:65228)
    at angular.js:65097
    at angular.js:55129

It should be reproducible here:
https://github.com/JonWallsten/monorepo-new/tree/repro-jit-issue

You already have access from before.
In the root run the following commands:

1. npm run full-install
2. npm run dev:edit (won't start all the apps)
3. Go to http://localhost:3060

Note: You will get an error because web-app-edit is compiling at the same time as web-lib-angular. To fix this just change anything in app.component.ts after initial compiling is done. You'll understand when you see the error.

[petebacondarwin]

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.

[petebacondarwin]

Actually I'll try...

[JonWallsten]

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.

[JonWallsten]

@petebacondarwin: The error goes away when I remove @oas/web-lib-angular from the imports in app.component.ts and app.module.ts. So I guess it has something to do with ng-packagr and my internal lib.

But it looks fine in the log:

@oas/web-lib-angular 
 | Bundling to FESM2015
 | Bundling to FESM5 
 | Bundling to UMD 
 | WARNING: No name was provided for external module '@oas/web-lib-core' in output.globals – guessing 'webLibCore' 
 | Minifying UMD bundle 
 | Copying assets 
 | Writing package metadata 
 | Removing scripts section in package.json as it's considered a potential security vulnerability.
 | Removing devDependencies section in package.json. 
 | Built @oas/web-lib-angular
 |  
 | ------------------------------------------------------------------------------
 | Built Angular Package
 |  - from: C:\Users\me\repo\monorepo-new\packages\web-lib-angular
 |  - to:   C:\Users\me\repo\monorepo-new\packages\web-lib-angular\dist 
 | ------------------------------------------------------------------------------

[petebacondarwin]

I am struggling even to get the initial build to complete. :-(