Ionic 5 with Angular 9 - Angular JIT compilation f

Question

Ionic 5 was announced a few hours ago (12th Feb 2020) and I upgraded my one of the small production app to Ionic 5 along with Angular 9:

# To update to Ionic 5
npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save-exact --save

# To update to Angular 9
ng update @angular/core @angular/cli

But when I did ionic serve, I started getting the bellow error:

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 getCompilerFacade (core.js:610)
    at Function.get (core.js:16065)
    at getInjectableDef (core.js:362)
    at injectableDefOrInjectorDefFactory (core.js:16816)

I came across a few Angular GitHub issues:

1. https://github.com/angular/angular-cli/issues/16873
2. https://github.com/angular/angular/issues/32466

They are saying to include import '@angular/compiler'; in main.ts file but when I matched one of my other Angular 9 application (which I updated recently), I don't see such configurations there.

Is Angular 9 not compatible with Ionic 5?

Answer 1

For Angular: Stopping the terminal and reserve it ng serve solved the problem for me.

Answer 2

Updated & Correct Solution to fix this

Based on the answer from Tran Quang, I went to see the CHANGELOG.md of ionic-native and came to know that they recently updated their package to compile with Angular 9.

Hence you need to update any/all dependencies of ionic-native. For this, look at all the dependencies in your package.gson file which start with @ionic-native/ and update them one by one.

For example, this is my package.gson:

So I'll have to run the following commands to update all my @ionic-native dependencies:

npm i @ionic-native/core@latest
npm i @ionic-native/camera@latest
npm i @ionic-native/firebase-x@latest
npm i @ionic-native/splash-screen@latest
npm i @ionic-native/status-bar@latest

Same you have to do for your @ionic-native dependencies. Just make sure, those are updated minimum to v5.21.5 (because a few old releases were not working).

Cheers

查看更多

0人赞 添加讨论(0) 举报

Answer 3

Because of ionic update not fast enough, you can try: npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -S work for me.

update 2020/02/18 => we can run npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -S now to get latest stable version

Answer 4

Try ng serve --aot, it helped me fix the problem, that's if you want to run with aot which is recommended since it will be similar to the production build and it will help you catch errors sooner.

Hope this helps.

Angular Link: https://angular.io/guide/aot-compiler