Angular project migration issue with version 9 IVY compiler

Question

I have migrated my angular project version 6 to 9 but till 8 my migration went smooth and it is working .once i migrate from v8 to v9 my project gets blank on screen and the IVY does not showing any error on build and chrome console is also clear no error there too i have tested with the test component and router-outlet is working but on my project component as the ivy compiles every piece of code at once so i am not able to get the affected area package or code to debug

thanks in advance.

main.ts look like this

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

tsconfig.json

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

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.4",
    "@angular/cdk": "^7.3.2",
    "@angular/common": "^9.0.4",
    "@angular/compiler": "^9.0.4",
    "@angular/core": "^9.0.4",
    "@angular/forms": "^9.0.4",
    "@angular/http": "^6.1.0",
    "@angular/localize": "^9.0.4",
    "@angular/material": "^7.3.2",
    "@angular/platform-browser": "^9.0.4",
    "@angular/platform-browser-dynamic": "^9.0.4",
    "@angular/router": "^9.0.4",
    "@ng-bootstrap/ng-bootstrap": "^5.x.x",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@sentry/browser": "^5.11.0",
    "angular-file-uploader": "^4.1.4",
    "angular-ng-autocomplete": "^1.1.17",
    "angular2-signaturepad": "^2.8.0",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "moment": "^2.24.0",
    "ng2-haversine": "^0.1.1",
    "ng2-uploader": "^2.0.0",
    "ngx-material-timepicker": "^2.12.0",
    "ngx-spinner": "^7.1.4",
    "ngx-ui-loader": "^7.2.2",
    "rxjs": "^6.5.3",
    "tslib": "^1.10.0",
    "typescript": "^3.6.4",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.4",
    "@angular/cli": "~9.0.4",
    "@angular/compiler-cli": "^9.0.4",
    "@angular/language-service": "^9.0.4",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.22",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.1",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

Can you please add some commas and post relevant code such as `package.json`, `tsconfig`, main module and the routing? — Jacopo Sciampi, Mar 05 '20 at 10:06
yes i have used all commas in router whenever i change the routing component to my newly created testcomponent .. routing works but my my project code redirect to path match does not work { path: 'xx', component: xx}, { path: 'xx', component: xx, canActivate: [WorkflowGuard] }, { path: 'xx', component: xx, canActivate: [WorkflowGuard] }, { path: 'xx', component: xx}, { path: '', redirectTo: '/xx', pathMatch: 'full' }, { path: '**', redirectTo: '/xx'} — Abhishek Sharma, Mar 05 '20 at 10:35
I meant to use commas in your question. Also please add to your question the relative code formatted. — Jacopo Sciampi, Mar 05 '20 at 10:40

score 1 · Answer 1 · answered Mar 05 '20 at 15:00

1

I had this same issue and for me, it was a problem with Devextreme:

https://github.com/DevExpress/devextreme-angular/issues/975#issuecomment-580172291

Starting with version 19.2.5 we support the IVY compiler.

I'd make sure that all your packages support IVY and upgrade accordingly.

answered Mar 05 '20 at 15:00

Josh96

56
1
8

No i am still facing issues with new IVY. When i am running angular8 codebase with ng build/serve with --prod it works but on the angular 9 codebase only the ng server is running when i add the --prod on serve or build it does not work – Abhishek Sharma Mar 12 '20 at 11:03
i am always getting error on chrome 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: ; Task: Promise.then ; Value: Error: Angular JIT compilation failed: '@angular/compiler' not loaded – Abhishek Sharma Mar 12 '20 at 11:07

Angular project migration issue with version 9 IVY compiler

1 Answers1