Uncaught Error: JIT compiler unavailable in Angular 12

Question

For a few days I have a problem with a certain error: Uncaught Error: JIT compiler unavailable. After upgrading angular from version 8 to 12 there was a problem that I run the ng build --prod --output-path = dist command and build Angular I have no problems, but when I start the page, this problem with JIT pops up. I have tried all the solutions from stack overflow like I add in my package.json

scripts{
 "postinstall": "ngcc --properties es5 browser module main --first-only"
}

I add in main.ts '@angular/compiler' Also in tsconfig.json in "angularCompilerOptions" I changed "enableIvy" to true One post says to change to true, the other that to false, but none of these solutions work for me. I reinstall node_modules couple of times and adding couple of dependecies but nothing really worked. This is my tsconfig file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "resolveJsonModule": true,
    "target": "es5",
    "skipLibCheck": true, 
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2015",
      "dom"
    ],
    "paths": {
      // "tslib": ["../frontend/node_modules/tslib/tslib.d.ts"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": true,
  }
}

In my package.json i add this line of code:

"scripts": {
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
}

In angular.json i changed aot: true, and buildOptimizer: false but it didin't change anything at all. In this post "https://stackoverflow.com/questions/68798086/jit-compiler-unavailable-after-angular-update" there is answer about changing Webpack configuration. But we dont use webpack so i dont really understand this. Can you help with this issue?

I'm facing similar issue. Any thing you got to know? – Nandan Feb 05 '22 at 13:34 — Nandan, Feb 05 '22 at 13:34
u found a solution for this ? – vigamage Mar 23 '22 at 12:05 — vigamage, Mar 23 '22 at 12:05

score 0 · Answer 1 · answered Feb 15 '22 at 08:49

0

For me it worked to call ng build --aot=true when building. Probably just a workaround, but I found no other solution.

answered Feb 15 '22 at 08:49

Maik abdata

41
2

George Márcio Cardoso · Answer 2 · 2022-06-10T21:18:35.420

0

After one thousand tries... I found that turning "aot" false made the build work properly. Without "aot", we have to turn the "buildOptimizer" to false too. angular.json section "production" "aot": false, "buildOptimizer": false,

edited Jun 10 '22 at 21:18

answered Jun 10 '22 at 21:14

George Márcio Cardoso

1
1

score 0 · Answer 3 · answered Jul 25 '22 at 08:15

According to the docs Angular started using AOT compilation as default with Angular 9. It sounds like you want to continue using JIT, therefore you have to disable aot in the angular.json:

Building on George Márcio Cardoso's answer, I had to disable ahead-of-time compilation and enable buildOptimization for it to work. I am using NSwag to generate a TS client for my API which I then put into an npm package, thus requiring JIT compilation since it's not a full project.

My angular.json for the project using the npm package (package requires JIT, project was AOT) now looks like this:

{
  ...
  "projects": {
    "my-project-using-npm": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": false,
            "buildOptimizer": false,
            ...

(snippet simplified for readability)

Uncaught Error: JIT compiler unavailable in Angular 12

3 Answers3