Improve JIT compiler unavailable error

🐞 Bug report

Command (mark with an x)

N/A. The app is built in AOT mode using @ngtools/webpack@12.2.4 and a custom Webpack config file.

Is this a regression?

Yes, the previous version in which this bug was not present was: @ngtools/webpack@11.2.14

Description

The AOT build in Webpack 5 (and also Webpack 4) succeeds with no errors, but the app fails to render and the browser shows the following error in the console:

Uncaught Error: JIT compiler unavailable
    at qn (app.d58833d2c8eb48cf8f29.js:2)

Releated app.js source code:

function qn(e) {
  const t = Q.ng;
  if (t && t.\u0275compilerFacade) return t.\u0275compilerFacade;
  throw new Error('JIT compiler unavailable')
}

🔬 Minimal Reproduction

I created a new Angular CLI project using a custom webpack config to try to mimic our environment, including identical tsconfig.json and main.ts files, but I was unable to reproduce the error. The only change we made was upgrading all Angular packages from 11.2.14 to 12.2.4. No changes were made to our webpack config files or any other code.

I thought this might be a conflict with Angular 12 and Webpack 4 (i.e. @ngtools/webpack@11.2.14), so I upgraded to Webpack 5 (i.e. upgraded @ngtools/webpack, zone.js, and all other packages to the “latest” versions). Both the Webpack 4 and Webpack 5 builds succeed with no errors, but the Angular run-time error still occurs.

Note: The error occurs when running the AOT build locally on an Express server and when deploying it to our Nginx Server. Our Webpack config does not include webpack-dev-server.

Here is the @ngtools/webpack config:

new AngularWebpackPlugin({
      tsconfig: helpers.root('src', 'prod.tsconfig.json'),
      jitMode: false
}),

🔥 Exception or Error

Uncaught Error: JIT compiler unavailable
    at qn (app.d58833d2c8eb48cf8f29.js:2)

🌍 Your Environment

Angular CLI: 12.2.4
Node: 14.16.1
Package Manager: npm 6.14.12
OS: darwin x64

Angular: 12.2.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1202.4
@angular-devkit/build-optimizer   0.1202.4
@angular-devkit/core              12.2.4
@angular-devkit/schematics        12.2.4
@ngtools/webpack                  12.2.4
@schematics/angular               12.2.4
rxjs                              6.6.7
typescript                        4.3.2
webpack                           5.51.1

Anything else relevant? Someone else posted a similar error on Stack Overflow.

[alan-agius4]

In general you don’t need and shouldn’t import @angular/compiler directly. Typically you need to do so in extreme cases when your application is using both JIT and AOT (IE: hybrid version). Unless you are doing so, this indicates that there might be a problem with either your application or a library.

Using the Ivy Compatibility Guide with TerserPlugin and several plugins doesn’t seem like a rare case, but re-wording the Generic error should take care of the issue without updating anything else.

Note, the Angular tooling team doesn’t support custom Webpack configurations. By choosing to extend the Webpack configuration you effectively moved away from the happy path.

Overall. I do think that the error could be improved and restore the generic error message with the one prior to https://github.com/angular/angular/pull/42693

//cc @JoostK

[stevethemacguy]

Hi @Boshskoski. Sorry, I don’t think I’ll get to this anytime soon. I suggest posting on StackOverflow.