Angular-cli: 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)

• [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 https://github.com/angular/angular/issues/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. :-(

[JonWallsten]

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

Whats the error? I'll help out.

[petebacondarwin]

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.

This bit :-)

[petebacondarwin]

Even when I modify app.component.ts I still get:

 | ERROR in packages/web-app-edit/src/app/app.module.ts
 | Module not found: Error: Can't resolve '@oas/web-lib-angular' in '/Users/pete/dev/angular/tmp/monorepo-new/packages/web-app-edit/src/app'
 |  @ packages/web-app-edit/src/app/app.module.ts 13:24-55
 |  @ packages/web-app-edit/src/main.ts
 |  @ multi (webpack)-dev-server/client?http://localhost:3060 packages/web-app-edit/(webpack)/hot/dev-server.js ./src/main.ts
 | 
 | ERROR in packages/web-app-edit/src/app/app.component.ts
 | Module not found: Error: Can't resolve '@oas/web-lib-angular' in '/Users/pete/dev/angular/tmp/monorepo-new/packages/web-app-edit/src/app'
 |  @ packages/web-app-edit/src/app/app.component.ts 10:24-55
 |  @ packages/web-app-edit/src/app/app.module.ts
 |  @ packages/web-app-edit/src/main.ts
 |  @ multi (webpack)-dev-server/client?http://localhost:3060 packages/web-app-edit/(webpack)/hot/dev-server.js ./src/main.ts

[JonWallsten]

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.

This bit :-)

Just add const test = 1; in packages/web-app-edit/src/app/app.component.ts and save. Then remove it as save again. It doesn't recompile if there aren't any changes that would affect the output (like newlines and comments)

[petebacondarwin]

OK that works!

[petebacondarwin]

This is very complex setup :-) I think ... that these subproject are built with ivy turned on, right? If so it might be worth compiling then with ivy disabled and then ngcc can do its thing. We don't really support external packages that are built directly with ivy yet. For sure ngcc is not doing anything to the web-lib-angular project. Also I wonder if you could try moving all the dist folders out from under their respective projects folders? It might be that the package.json that is one level up from each dist folder affects things?

[JonWallsten]

This is very complex setup :-) I think ... that these subproject are built with ivy turned on, right? If so it might be worth compiling then with ivy disabled and then ngcc can do its thing. We don't really support external packages that are built directly with ivy yet. For sure ngcc is not doing anything to the web-lib-angular project. Also I wonder if you could try moving all the dist folders out from under their respective projects folders? It might be that the package.json that is one level up from each dist folder affects things?

I can try to compile web-lib-angular without ivy. But since I have multiple apps using it I would have a risk of conflict when these apps would try compile it at the same time, right?

I could try that, but it complicates stuff with our CI. I'll take a look tomorrow.

Here's the result from turning of IVY for the lib in question:

ERROR: C:/Users/me/repo/monorepo-new/packages/web-lib-angular/src/services/debug.service.ts:3:1: Error encountered in metadata generated for exported symbol 'DebugService':
 C:/Users/me/repo/monorepo-new/packages/web-lib-angular/src/services/debug.service.ts:14:24: Metadata collected contains an error that will be reported at runtime: Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler.
  {"__symbolic":"error","message":"Variable not initialized","line":13,"character":23}

Not sure why the template compiler cares about a static Angular agnostic service?

[petebacondarwin]

I note that the webpack copy of app.module.ts does not appear to have been AOT compiled:

Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
var core_1 = __webpack_require__(/*! @angular/core */ "../../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js");
var platform_browser_1 = __webpack_require__(/*! @angular/platform-browser */ "../../node_modules/@angular/platform-browser/__ivy_ngcc__/fesm5/platform-browser.js");
var router_1 = __webpack_require__(/*! @angular/router */ "../../node_modules/@angular/router/__ivy_ngcc__/fesm5/router.js");
var forms_1 = __webpack_require__(/*! @angular/forms */ "../../node_modules/@angular/forms/__ivy_ngcc__/fesm5/forms.js");
var animations_1 = __webpack_require__(/*! @angular/platform-browser/animations */ "../../node_modules/@angular/platform-browser/__ivy_ngcc__/fesm5/animations.js");
var angular_fontawesome_1 = __webpack_require__(/*! @fortawesome/angular-fontawesome */ "../../node_modules/@fortawesome/angular-fontawesome/__ivy_ngcc__/fesm5/angular-fontawesome.js");
var free_solid_svg_icons_1 = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "../../node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
var app_routes_1 = __webpack_require__(/*! ./app.routes */ "./src/app/app.routes.ts");
var app_component_1 = __webpack_require__(/*! ./app.component */ "./src/app/app.component.ts");
var web_lib_angular_1 = __webpack_require__(/*! @oas/web-lib-angular */ "../web-lib-angular/dist/fesm5/oas-web-lib-angular.js");
var http_1 = __webpack_require__(/*! @angular/common/http */ "../../node_modules/@angular/common/__ivy_ngcc__/fesm5/http.js");
var start_component_1 = __webpack_require__(/*! ./components/start/start.component */ "./src/app/components/start/start.component.ts");
var AppModule = /** @class */ (function () {
    function AppModule(library) {
        library.addIcons(free_solid_svg_icons_1.faCog);
        library.addIcons(free_solid_svg_icons_1.faSearch);
        library.addIcons(free_solid_svg_icons_1.faTimes);
        library.addIcons(free_solid_svg_icons_1.faBars);
    }
    AppModule = tslib_1.__decorate([
        core_1.NgModule({
            imports: [
                router_1.RouterModule.forRoot(app_routes_1.appRoutes, {
                    enableTracing: false,
                    useHash: true
                }),
                forms_1.FormsModule,
                forms_1.ReactiveFormsModule,
                animations_1.BrowserAnimationsModule,
                platform_browser_1.BrowserModule,
                angular_fontawesome_1.FontAwesomeModule,
                http_1.HttpClientModule,
                web_lib_angular_1.WebLibAngularModule,
                web_lib_angular_1.MaterialDesignModule
            ],
            declarations: [
                app_component_1.AppComponent,
                start_component_1.StartComponent
            ],
            providers: [
                web_lib_angular_1.DialogService
            ],
            bootstrap: [app_component_1.AppComponent]
        }),
        tslib_1.__metadata("design:paramtypes", [angular_fontawesome_1.FaIconLibrary])
    ], AppModule);
    return AppModule;
}());
exports.AppModule = AppModule;

I am not sure why this is...

[JonWallsten]

How is that possible? I thought the AngularCompilerPlugin did this automatically?

[petebacondarwin]

Yeah that is confusing me...

[petebacondarwin]

I'm going to ask @alxhub to take a look. Are you able to give him access to the repo?

[JonWallsten]

He should already have access. He's looked at it before when I had trouble compiling the repo because web-lib-angular wasn't packages by ng-packagr.

Edit: And thanks! I'll try to look out for any comments here if there's something you guys need help with.

[petebacondarwin]

Cool. I asked because he is not online yet and I will shortly be going offline :-)

[JonWallsten]

Great! I got the lib to build without ivy now! Didn't do any differens though. Still issues with
Uncaught TypeError: Cannot read property 'id' of undefined in registerNgModuleType

[alxhub]

@JonWallsten hello again! Firstly, thanks for taking the time to put together the reproduction and work with us to track down the problem.

I don't think this is an issue with Angular, actually. I ran the "build:edit" and "build:prod" tasks, and both seem to produce an Ivy application which works in the browser, no JIT mode needed.

It's only when running the dev:edit task (which has a lot of race conditions up front) that the problem shows up. So something is up with the devserver setup that's resulting in the app itself not being compiled with AOT. Unfortunately this build path descends into build-tools/run-all which appears to be a custom build system of sorts, and I wasn't able to easily figure out how webpack was being invoked or with what configuration.

I think with the given reproduction, we've investigated this as best as we can. The issue is that in dev:edit mode, the build system does not use AOT to compile the AppModule, hence the message about the JIT compiler needing to be loaded at runtime. I'm guessing if you look into this, you'll find that the webpack devserver isn't being invoked with the right set of plugins or something. Based on that, I'm going to resolve this issue.

If you still feel like this is an issue with Angular, we'd of course be happy to help investigate. To do this though, we'll need a reproduction without a complex custom build system. Ideally, this would be a shell script (a build.sh) that compiles each library, in sequence, and then the main application with a direct webpack invocation, where we can clearly see the build steps involved and their inputs and outputs.

[JonWallsten]

@alxhub: Thanks for looking into it!
I just now tested to build edit from the application root instead of the monorepo root and it does indeed work. I never tested that. Was so focused on getting the whole repo to work.
However, I did the corresponding script for dev:edit but with a production build instead of starting the dev server. And this does work as well from the monorepo root. So the build-tools/run-all doesn't seem to be the issue here. It basically just runs the same npm script in each package with the package as working directory.
My guess is that since all packages builds at the same time in dev-mode (I can't to stages with the current script since the tasks never exits in watch mode), the app is being compiled before the library is packaged with ng-packagr initially. When the package then is complete, and the app notices this and rebuilds, it seems to be to late, not sure why?

I did just now test to start each lib with watch on, but one at a time, and then the application last. I also tried to change something in the lib to trigger a rebuild of the app. And this did work as well. So I'm fairly certain the issue is that the app is started before the library is initially packages, and that the app can't figure it out on the next rebuild for some reason.

So I'll have to look at how I can them in stages even though we're in watch mode and the task never technically finishes.
At least now I know what do to. So thanks again for that. And thanks @petebacondarwin for looking into this as well! I guess this was just one of those days when you tested exactly the one thing that didn't work out of all scenarios that did. Have a great weekend both of you!

[JonWallsten]

@alxhub: So, I did the same test on our project just now to make sure it worked the same. Unfortunately I get the same 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.

Since we have excluded the build tools (at least for the simple test) I guess it has to be content. Do you have any idea of what could cause this, so I know where to investigate? Is there some package/module that isn't compiled into IVY that is the issue?

Edit: So I did some digging. It stops on BrowserAnimationsModule because ɵmod is undefined. What does that mean? RouterModule that was right before in the import list had this defined. And it works fine.

Edit 2: I removed @angular from node_modules, installed again, and compiled again, and the same modules fails: BrowserAnimationsModule

The class looks like this:

var BrowserAnimationsModule = /** @class */ (function () {
    function BrowserAnimationsModule() {
    }
    BrowserAnimationsModule = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
        Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["NgModule"])({
            exports: [_angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__["BrowserModule"]],
            providers: BROWSER_ANIMATIONS_PROVIDERS,
        })
    ], BrowserAnimationsModule);
    return BrowserAnimationsModule;
}());

The build log:

> [email protected] webpack-dev-server C:\Users\<me>\repo\oas-web\packages\web-app-edit
> node --max_old_space_size=8192 ../../node_modules/webpack-dev-server/bin/webpack-dev-server "--config" "config/webpack.dev.ts" "--colors" "--hot"

[2020-02-07 20:33:25] Building 

Compiling @angular/core : module as esm5

Compiling @angular/common : module as esm5

Compiling @angular/platform-browser : module as esm5

Compiling @angular/platform-browser-dynamic : module as esm5

Compiling @angular/router : module as esm5

Compiling @angular/forms : module as esm5

Compiling @angular/animations : module as esm5

Compiling @angular/animations/browser : module as esm5

Compiling @angular/platform-browser/animations : module as esm5

Compiling @angular/common/http : module as esm5

Compiling @angular/cdk/keycodes : module as esm5

Compiling @angular/cdk/platform : module as esm5

Compiling @angular/cdk/observers : module as esm5

Compiling @angular/cdk/a11y : module as esm5

Compiling @angular/cdk/bidi : module as esm5

Compiling @angular/material/core : module as esm5

Compiling @angular/material/checkbox : module as esm5

Compiling @angular/cdk/portal : module as esm5

Compiling @angular/cdk/collections : module as esm5

Compiling @angular/cdk/scrolling : module as esm5

Compiling @angular/cdk/overlay : module as esm5

Compiling @angular/material/menu : module as esm5

Compiling @angular/material/form-field : module as esm5

Compiling @angular/material/select : module as esm5

Compiling @angular/material/autocomplete : module as esm5

Compiling @angular/cdk/layout : module as esm5

Compiling @angular/material/tooltip : module as esm5

Compiling @angular/cdk/text-field : module as esm5

Compiling @angular/material/input : module as esm5

Compiling @angular/material/radio : module as esm5

Compiling @angular/material/card : module as esm5

Compiling @angular/material/divider : module as esm5

Compiling @angular/cdk/accordion : module as esm5

Compiling @angular/material/expansion : module as esm5

Compiling @angular/material/tabs : module as esm5

Compiling @angular/material/button : module as esm5

Compiling @angular/material/button-toggle : module as esm5

Compiling @angular/material/chips : module as esm5

Compiling @angular/material/icon : module as esm5

Compiling @angular/material/slide-toggle : module as esm5

Compiling @angular/material/progress-spinner : module as esm5

Compiling @angular/material/progress-bar : module as esm5

Compiling @angular/material/dialog : module as esm5

Compiling @angular/material/paginator : module as esm5

[2020-02-07 20:35:38] Finished
‼ ｢wdm｣: Hash: 24205053e56cf06f392d 
Version: webpack 4.41.5
Time: 132867ms
Built at: 2020-02-07 21:35:38
                                             Asset       Size       Chunks             Chunk Names
                                        angular.js   4.78 MiB      angular  [emitted]  angular
                                   appentries.json  888 bytes               [emitted]
                                assets/favicon.png   1.18 KiB               [emitted]
            assets/fonts/MaterialIcons-Regular.eot    140 KiB               [emitted]
            assets/fonts/MaterialIcons-Regular.ttf    125 KiB               [emitted]
           assets/fonts/MaterialIcons-Regular.woff   56.3 KiB               [emitted]
          assets/fonts/MaterialIcons-Regular.woff2   43.3 KiB               [emitted]
                      assets/icons/bug-rounded.svg  824 bytes               [emitted]
                    assets/icons/error-rounded.svg  229 bytes               [emitted]
                     assets/icons/info-rounded.svg  268 bytes               [emitted]
                  assets/icons/warning-rounded.svg  277 bytes               [emitted]
assets/images/b66699e1ffd173cabe567ef04ce8a214.png   10.2 KiB               [emitted]
                                    fontawesome.js    911 KiB  fontawesome  [emitted]  fontawesome
                                        index.html  972 bytes               [emitted]
                                            lib.js   6.84 MiB          lib  [emitted]  lib
                                           main.js   4.95 MiB         main  [emitted]  main
                                         moment.js    779 KiB       moment  [emitted]  moment
                                         vendor.js   1.57 MiB       vendor  [emitted]  vendor
Entrypoint main = angular.js moment.js fontawesome.js lib.js vendor.js main.js
[0] multi (webpack)-dev-server/client?http://localhost:3060 (webpack)/hot/dev-server.js ./src/main.ts 52 bytes {main} [built]
[../../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js] C:/Users/<me>/repo/oas-web/node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js 1.24 MiB {angular} [built]
[../../node_modules/@angular/platform-browser/__ivy_ngcc__/fesm5/platform-browser.js] C:/Users/<me>/repo/oas-web/node_modules/@angular/platform-browser/__ivy_ngcc__/fesm5/platform-browser.js 84.8 KiB {angular} [built]
[../../node_modules/normalize.css/normalize.css] C:/Users/<me>/repo/oas-web/node_modules/normalize.css/normalize.css 1.15 KiB {vendor} [built]
[../../node_modules/postal/lib/postal.js] C:/Users/<me>/repo/oas-web/node_modules/postal/lib/postal.js 16.8 KiB {vendor} [built]
[../../node_modules/tslib/tslib.es6.js] C:/Users/<me>/repo/oas-web/node_modules/tslib/tslib.es6.js 9.21 KiB {vendor} [built]
[../../node_modules/webpack-dev-server/client/index.js?http://localhost:3060] (webpack)-dev-server/client?http://localhost:3060 4.29 KiB {vendor} [built]
[../../node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {vendor} [built]
[../../node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {vendor} [built]
[../../node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {vendor} [built]
[../../node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {vendor} [built]
[../../node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {vendor} [built]
[../../node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {vendor} [built]
[../../node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {vendor} [built]
[./src/main.ts] 1.18 KiB {main} [built]
    + 915 hidden modules

WARNING in C:\Users\<me>\repo\oas-web\packages\web-app-edit\src\environments\environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 725 bytes {0} [built]

[JonWallsten]

@alxhub / @petebacondarwin: So the weird thing is that the files are actually not generated when compiling the modules.
It complains about the missing BrowserModuleAnimation. And the file is actually not there:

Compare with fesm2015:

I removed the platform-browser folder and installed again and ran the ngcc script, and now the file is there. What could have caused it to not be generated, without producing some kind of error?

[JonWallsten]

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

[alxhub]

Glad to hear you got it figured out! Parallel building like that is decently tricky!

[HazTheGoat]

@JonWallsten did you end up using as your postinstall script? and also, did you do anything different to your main.ts file? any chance you can write a step by step what you ended up doing to fix this problem?

[JonWallsten]

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

[Teemo-the-troll]

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

[speedy32]

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';

[genuineyehuo]

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';

same problem，

[abhishekssd]

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

• [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?

HI @JonWallsten i did not get any solution for this issue so far can you help if you found the solution

[JonWallsten]

@abhishekssd Yes, you need to use Chrome DevTools to investigate which module it has issue with and then figure out how to fix that. There's no easy what that I know of.

[petebacondarwin]

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

[JACrazy]

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.

[submarines-and]

Same here, no other changes made.

[ezalivadnyi]

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

[Frotty]

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.

[sampath0606]

I am facing the the following issues when i try to do 'ng serve' after upgrading to 9.0.7.

NG8001: 'mat-select' is not a known element:

1. If 'mat-select' is an Angular component and it has 'disabled' input, then verify that it is part of this module.
2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

error NG8001: 'mat-form-field' is not a known element:

1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

If i update aot:false ng serve is working fine , but on building for prod i', again facing the above mentioned issues.

Everything was working completely fine with 9.0.6. Could some body help me out?

My Package File:

{
"name": "nol-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.0.7",
"@angular/cdk": "~9.2.0",
"@angular/common": "~9.0.7",
"@angular/compiler": "~9.0.7",
"@angular/core": "~9.0.7",
"@angular/forms": "~9.0.7",
"@angular/material": "^9.2.0",
"@angular/platform-browser": "~9.0.7",
"@angular/platform-browser-dynamic": "~9.0.7",
"@angular/router": "~9.0.7",
"classlist.js": "^1.1.20150312",
"handlebars": "^4.7.3",
"kind-of": "^6.0.3",
"lodash": "^4.17.15",
"rxjs": "~6.5.4",
"serialize-javascript": "^2.1.2",
"tree-kill": "^1.2.2",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.7",
"@angular/cli": "~9.0.7",
"@angular/compiler-cli": "~9.0.7",
"@angular/language-service": "~9.0.7",
"@types/jasmine": "^3.3.16",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^12.12.34",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.3",
"protractor": "^5.4.3",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.7.5"
}
}

[JACrazy]

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}