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

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