issue on angular production build on angular 9 migrate

Question

hello Everyone, i am getting issue on angular after migration, I have migrated the project to angular 9 from angular 8 . the angular with ng server --prod works in version 8 but on version 9 i am getting error . i have checked with ng build --prod and ng serve --prod. As the new angular 9 has IVY compiler for AOT compilation so i have imported angular/compiler in main.ts, also the bootstrap is injecting with platformBrowserDynamic as i can see angular 8/9 uses jit compilation for ng serve on development mode so project is running on jit but as angular is using aot comilation for production my codebase gets errors

pollyfills.ts ` import '@angular/compiler'; import '@angular/localize/init'; import 'core-js/es/array'; import 'zone.js/dist/zone';

`

**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);
`

**package.json**
`{
  "name": "project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.0.5",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "^9.0.5",
    "@angular/compiler": "^9.0.5",
    "@angular/core": "^9.0.5",
    "@angular/forms": "^9.0.5",
    "@angular/http": "^7.2.16",
    "@angular/localize": "^9.0.5",
    "@angular/material": "^7.3.2",
    "@angular/platform-browser": "^9.0.5",
    "@angular/platform-browser-dynamic": "^9.0.5",
    "@angular/router": "^9.0.5",
    "@ng-bootstrap/ng-bootstrap": "^6.0.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@sentry/browser": "^5.13.2",
    "angular-file-uploader": "^5.0.2",
    "angular-ng-autocomplete": "^2.0.1",
    "angular2-signaturepad": "^2.11.0",
    "core-js": "^3.6.4",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "ng2-haversine": "^0.1.1",
    "ng2-uploader": "^2.0.0",
    "ngx-spinner": "^8.1.0",
    "ngx-ui-loader": "^8.0.0",
    "rxjs": "^6.5.4",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.5",
    "@angular/cli": "~9.0.5",
    "@angular/compiler-cli": "^9.0.5",
    "@angular/language-service": "^9.0.5",
    "@types/jasmine": "~3.5.7",
    "@types/jasminewd2": "~2.0.8",
    "@types/jquery": "^3.3.33",
    "@types/node": "~13.7.7",
    "codelyzer": "~5.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "protractor": "^5.4.3",
    "ts-node": "~8.6.2",
    "tslint": "~6.0.0",
    "typescript": "^3.6.4"
  }
}
`
**angular.json**
`{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "project": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "prefix": "app",
        "schematics": {},
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist/project",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.app.json",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.css"
              ],
              "scripts": []
            },
            "configurations": {
              "production": {
                "fileReplacements": [
                  {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                  }
                ],
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true
              }
            }
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "project:build"
            },
            "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",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.spec.json",
              "karmaConfig": "src/karma.conf.js",
              "styles": [
                "src/styles.css"
              ],
              "scripts": [],
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ]
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
              ],
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      },
      "project-e2e": {
        "root": "e2e/",
        "projectType": "application",
        "architect": {
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "e2e/protractor.conf.js",
              "devServerTarget": "project:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "project:serve:production"
              }
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": "e2e/tsconfig.e2e.json",
              "exclude": [
                "**/node_modules/**"
              ]
            }
          }
        }
      }
    },
    "defaultProject": "project",
    "cli": {
      "analytics": "87b84483-668a-45d2-a5fa-0b6badd7e97e"
    }
  }

`

tsconfig.json `

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

`

i am getting issue on chrome console the following on ng serve --prod or ng serve --prod --aot=true . `

polyfills.9b85908313a7766a001a.js:1.
 Unhandled Promise rejection: 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. ; Zone: <root> ; Task: Promise.then ; Value: 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.a41bfed0d971f96f8f03.js:1)
    at Function.get (main.a41bfed0d971f96f8f03.js:1)
    at $e (main.a41bfed0d971f96f8f03.js:1)
    at Qa (main.a41bfed0d971f96f8f03.js:1)
    at main.a41bfed0d971f96f8f03.js:1
    at e.processProvider (main.a41bfed0d971f96f8f03.js:1)
    at main.a41bfed0d971f96f8f03.js:1
    at main.a41bfed0d971f96f8f03.js:1
    at Array.forEach (<anonymous>)
    at Se (main.a41bfed0d971f96f8f03.js:1) 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 (http://localhost:4200/main.a41bfed0d971f96f8f03.js:1:138535)
    at Function.get (http://localhost:4200/main.a41bfed0d971f96f8f03.js:1:198740)
    at $e (http://localhost:4200/main.a41bfed0d971f96f8f03.js:1:144912)
    at Qa (http://localhost:4200/main.a41bfed0d971f96f8f03.js:1:204231)
    at http://localhost:4200/main.a41bfed0d971f96f8f03.js:1:202451
    at e.processProvider (http://localhost:4200/main.a41bfed0d971f96f8f03.js:1:202465)
    at http://localhost:4200/main.a41bfed0d971f96f8f03.js:1:202249
    at http://localhost:4200/main.a41bfed0d971f96f8f03.js:1:141452
    at Array.forEach (<anonymous>)
    at Se (http://localhost:4200/main.a41bfed0d971f96f8f03.js:1:141399)

`

when i use ng serve it serve on my localhost without issue, but when i add the prod keyword or trying to make a build with ng build --prod . the dist folder does not work on my dev server and i am getting the above errors.

Answer 1

import the compiler in the main.ts file by

import '@angular/compiler';

Answer 2

Angular AOT option is set to true by default since version 9. do the followings to fix the issue

1. import '@angular/compiler' in main.ts file
2. upgrade all dependencies
3. set the "aot" option to false in angular.json
4. if using "buildOptimizer" flag then set it to false too as "buildOptimizer" works only with "aot" set to true