Skip to content

Improve JIT compiler unavailable error #43415

@stevethemacguy

Description

@stevethemacguy

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: compilerIssues related to `ngc`, Angular's template compilercompiler: linkerhotlist: error messagesregressionIndicates than the issue relates to something that worked in a previous version

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions