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

Description

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?