Ionic 5 with Angular 9 - Angular JIT compilation failed: '@angular/compiler' not loaded

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:

Answer 1

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

Answer 2

Tried several ways, including npm update, with no success. The only way I could get Ionic 5 with Angular 9 to work in production mode, was setting "aot": false and "buildOptimizer": false in angular.json.

Answer 3

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

Answer 4

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 5

need to update ionic as well, it will work. For angular when update version it updates all dependent itself. But in ionic need to update manually.

"@angular/common": "9.0.5",
    "@angular/core": "9.0.5",
    "@angular/forms": "9.0.5",
    "@angular/platform-browser": "9.0.5",
    "@angular/platform-browser-dynamic": "9.0.5",
    "@angular/router": "9.0.5",
    "@ckeditor/ckeditor5-angular": "1.2.2",
    "@ckeditor/ckeditor5-build-classic": "17.0.0",
    "@ionic-native/camera": "5.22.0",
    "@ionic-native/core": "5.22.0",
    "@ionic-native/crop": "5.22.0",
    "@ionic-native/device": "5.22.0",
    "@ionic-native/diagnostic": "5.22.0",
    "@ionic-native/document-viewer": "5.22.0",
    "@ionic-native/file": "5.22.0",
    "@ionic-native/file-opener": "5.22.0",
    "@ionic-native/file-path": "5.22.0",
    "@ionic-native/file-transfer": "5.22.0",
    "@ionic-native/fingerprint-aio": "5.22.0",
    "@ionic-native/image-picker": "5.22.0",
    "@ionic-native/in-app-browser": "5.22.0",
    "@ionic-native/network": "5.22.0",
    "@ionic-native/splash-screen": "5.22.0",
    "@ionic-native/status-bar": "5.22.0",
    "@ionic-native/toast": "5.22.0",

Answer 6

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 had 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