Angular-cli: Building a project for production with aot and buildOptimizer set to true throws Angular JIT compilation failed: '@angular/compiler' not loaded! Error

[vzhny]

🐞 bug report

Affected Package

I'm assuming the issue is caused by package @angular/compiler.

Is this a regression?

Not sure if this is a regression.

Description

When building the project for production using ng build --prod with the options aot and buildOptimizer set to true in `angular,json, I get the console error below trying to load the app.

This does not happen when building the project with the additional --buildOptimizer=false flag -- the project successfully runs once the build finishes.

🔥 Exception or Error

main.79db8342f6e367a1b357.js:1 ERROR Error: Uncaught (in promise): 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.
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 q (main.79db8342f6e367a1b357.js:1)
    at Function.get (main.79db8342f6e367a1b357.js:1)
    at S (main.79db8342f6e367a1b357.js:1)
    at Qs.get (main.79db8342f6e367a1b357.js:1)
    at ce (main.79db8342f6e367a1b357.js:1)
    at Object.le (main.79db8342f6e367a1b357.js:1)
    at Object.e.ɵfac [as factory] (4.1927761ac34f22169b57.js:1)
    at Qs.hydrate (main.79db8342f6e367a1b357.js:1)
    at Qs.get (main.79db8342f6e367a1b357.js:1)
    at _l.get (main.79db8342f6e367a1b357.js:1)
    at T (polyfills.05283d2a43b3e87f2e8a.js:1)
    at T (polyfills.05283d2a43b3e87f2e8a.js:1)
    at polyfills.05283d2a43b3e87f2e8a.js:1
    at u.invokeTask (polyfills.05283d2a43b3e87f2e8a.js:1)
    at Object.onInvokeTask (main.79db8342f6e367a1b357.js:1)
    at u.invokeTask (polyfills.05283d2a43b3e87f2e8a.js:1)
    at a.runTask (polyfills.05283d2a43b3e87f2e8a.js:1)
    at _ (polyfills.05283d2a43b3e87f2e8a.js:1)
    at l.invokeTask [as invoke] (polyfills.05283d2a43b3e87f2e8a.js:1)
    at p (polyfills.05283d2a43b3e87f2e8a.js:1)

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.7
Node: 10.20.1
OS: win32 x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.1.7
@angular-devkit/schematics        9.1.7
@angular/cdk                      9.2.4
@angular/cli                      9.1.7
@angular/material                 9.2.4
@ngtools/webpack                  9.1.7
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

angular.json

{

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "newProjectRoot": "projects",

  "projects": {

    "project": {

      "root": "",

      "sourceRoot": "src",

      "projectType": "application",

      "architect": {

        "build": {

          "builder": "@angular-devkit/build-angular:browser",

          "options": {

            "aot": true,

            "outputPath": "dist",

            "index": "src/index.html",

            "main": "src/main.ts",

            "tsConfig": "src/tsconfig.app.json",

            "polyfills": "src/polyfills.ts",

            "assets": [

              "src/assets",

              "src/favicon.ico"

            ],

            "styles": [

              "node_modules/bootstrap/dist/css/bootstrap.min.css",

              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",

              "node_modules/angular2-draggable/css/resizable.min.css"

            ],

            "scripts": []

          },

          "configurations": {

            "production": {

              "budgets": [

                {

                  "type": "anyComponentStyle",

                  "maximumWarning": "6kb"

                }

              ],

              "optimization": true,

              "outputHashing": "all",

              "sourceMap": false,

              "extractCss": true,

              "namedChunks": false,

              "aot": true,

              "extractLicenses": true,

              "vendorChunk": false,

              "buildOptimizer": true,

              "fileReplacements": [

                {

                  "replace": "src/environments/environment.ts",

                  "with": "src/environments/environment.prod.ts"

                }

              ]

            }

          }

        },

        "serve": {

          "builder": "@angular-devkit/build-angular:dev-server",

          "options": {

            "browserTarget": "project:build",

            "proxyConfig": "src/proxy.conf.json"

          },

          "configurations": {

            "production": {

              "browserTarget": "project:build:production"

            }

          }

        },

        "extract-i18n": {

          "builder": "@angular-devkit/build-angular:extract-i18n",

          "options": {

            "browserTarget": "project:build"

          }

        },

        "test": {

          "builder": "@angular-devkit/build-angular:karma",

          "options": {

            "main": "src/test.ts",

            "karmaConfig": "./karma.conf.js",

            "polyfills": "src/polyfills.ts",

            "tsConfig": "src/tsconfig.spec.json",

            "scripts": [],

            "styles": [],

            "assets": [

              "src/assets",

              "src/favicon.ico"

            ]

          }

        },

        "lint": {

          "builder": "@angular-devkit/build-angular:tslint",

          "options": {

            "tsConfig": [

              "src/tsconfig.app.json",

              "src/tsconfig.spec.json"

            ],

            "exclude": [

              "/node_modules/"

            ]

          }

        }

      }

    },

    "project-e2e": {

      "root": "",

      "sourceRoot": "",

      "projectType": "application",

      "architect": {

        "e2e": {

          "builder": "@angular-devkit/build-angular:protractor",

          "options": {

            "protractorConfig": "./protractor.conf.js",

            "devServerTarget": "project:serve"

          }

        },

        "lint": {

          "builder": "@angular-devkit/build-angular:tslint",

          "options": {

            "tsConfig": [

              "e2e/tsconfig.e2e.json"

            ],

            "exclude": [

              "/node_modules/"

            ]

          }

        }

      }

    }

  },

  "defaultProject": "project",

  "schematics": {

    "@schematics/angular:component": {

      "style": "scss"

    }

  }

}

main.ts

import '@angular/compiler';

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

  enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule)

  .catch(err => console.log(err));

tsconfig.json

{

  "compileOnSave": false,

  "compilerOptions": {

    "module": "esnext",

    "outDir": "./dist/out-tsc",

    "sourceMap": true,

    "declaration": false,

    "moduleResolution": "node",

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "target": "esnext",

    "typeRoots": [

      "node_modules/@types"

    ],

    "lib": [

      "es2017",

      "dom"

    ]

  }

}

tsconfig.app.json

{

  "extends": "../tsconfig.json",

  "compilerOptions": {

    "outDir": "../out-tsc/app",

    "baseUrl": "./",

    "types": ["resize-observer-browser"]

  },

  "files": [

    "main.ts",

    "polyfills.ts"

  ],

  "include": [

    "src/*/.d.ts"

  ],

  "angularCompilerOptions": {

    "enableIvy": true

  }

}

[JoostK]

Hi @vzhny,

unfortunately there's not enough information to be able to pinpoint the issue here. We'd need a complete reproduction, preferably a Github repo we can clone and build locally.

[AlexAegis]

Just a hunch: Do you have, by any chance, an import from deeper than @angular/core? Like @angular/compiler/src/core. Internal imports have caused me similar problems and vscode sometimes autoimport those (Usually ChangeDetectionStrategy) instead of the public-facing modules.

Anyway, it's good idea to add these kind of paths to the import blacklist in tslint.json, so you get at least a warning.

[vzhny]

Just a hunch: Do you have, by any chance, an import from deeper than @angular/core? Like @angular/compiler/src/core. Internal imports have caused me similar problems and vscode sometimes autoimport those (Usually ChangeDetectionStrategy) instead of the public-facing modules.

Anyway, it's good idea to add these kind of paths to the import blacklist in tslint.json, so you get at least a warning.

@AlexAegis Hi there. I searched through the project and the only place @angular/core is being imported is in main.ts; no internal imports that could've been causing the issue unfortunately.

[loedeman]

I have a comparable issue. In our project, there is a complex scenario in which we need to compile a dynamic component on-the-fly. Therefore (and only therefore), we are using JIT. In order to make this work, we import import '@angular/compiler'; in our main.ts. When we build our project using the production build with optimization, the application works fine, except for the dynamic code compilation and fails with the exception mentioned above. It seems to me that the Ivy/AOT compiler does not create the necessary code for the JIT compiler...

[JoostK]

Hallo @loedeman,

Could you extract a minimum reproduction of your issue? If so, I can take a look to identify what is going on.

[loedeman]

Hi @JoostK will do that tomorrow! Should be very easy to create I hope ;).

[loedeman]

I just created a reproduction scenario containing a dynamic component. Here it is: Angular JIT Production. The readme describes how to quickly reproduce the error mentioned above. Hope this gets resolved, because this currently prevents us from deploying production builds to our customers.

[JoostK]

@loedeman Thank you, found the issue! Build optimizer incorrectly considers @angular/compiler as having no side-effects, despite its package.json specifying "sideEffects": true. The culprit is here:

https://github.com/angular/angular-cli/blob/ba0f7acce294f86ee8e533dc90d335136a0c043c/packages/angular_devkit/build_optimizer/src/build-optimizer/build-optimizer.ts#L28

Removing that line fixes the issue.

I'm transferring this over the the CLI repo as it has to be fixed there.

[loedeman]

Wow, that's quick :-). Sounds great, I will be more than happy to report the issue fixed soon 💯 !

[alan-agius4]

Duplicate of https://github.com/angular/angular-cli/issues/17663

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}