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:

# 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:

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?

Shashank Agrawal · Accepted Answer · 2020-04-25T09:08:41.793

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

If for some reason, you can't update your @ionic-native dependencies, look at my original answer for different workarounds/solutions ⬇️

Original Answer

For me, the following solutions worked. Not sure if they are perfect to add but hoping the Ionic team will fix this as these solutions were not needed when I upgraded my plain Angular app to Angular 9.

Solution 1

Turn off the AOT by changing "aot": true to "aot: false in angular.json file. I would not recommend this as this improves the performance of the Angular app and improves the catching of error codes in development mode.

Solution 2

If you don't want to change in angular.json and wants to fix this issue for ionic serve only, pass the --aot=false flag to ng command by using --:

ionic serve -- --aot=false

Solution 3 (blind option)

If none the solutions above are working for you, you can run a command npm update which will update literally all the dependencies from your package.json (that means, Ionic dependencies will also be updated).

This is a blind option because you won't have an idea that which dependencies are updated and what are the breaking changes in those updated dependencies. So you might end up fixing other issues because of this.

So it's up to you to take this risk :) Well, this is worth doing if your app is not that big or not using any codes which are removed in the newer dependencies.

Solution 4 (the last & worst option)

Add import '@angular/compiler'; in main.ts file. But this might increase the bundle size.

Extra

While upgrading Ionic, you might face another issue because of wrong import in polyfills.ts. If yes, check out src/zone-flags.ts is missing from the TypeScript compilation after upgrading to Ionic 5

This works brilliantly up until I build for production: `ionic cordova build android --prod --release --source-map` Then we're back at the same error `Error: Angular JIT compilation failed: '@angular/compiler' not loaded!` — TimNode, Mar 12 '20 at 02:30
Have you tried remove `--source-map` from the production build? — Shashank Agrawal, Mar 12 '20 at 03:16
Not one of these solutions on this entire page has worked for me, when I do a non-prod build for a test environment configuration: "ionic cordova build android --configuration uat". I always get the error "Error: Angular JIT compilation failed: '@angular/compiler' not loaded!" — AndrWeisR, Mar 26 '20 at 02:48
Your some dependency must be outdated. Can you share your dependencies in a **text file** and share the link with me — Shashank Agrawal, Mar 26 '20 at 06:02
Upgrading @ionic/native worked for me. Best to try and not include the compiler if possible as it's going to increase your output file size. — Lee Gunn, Apr 25 '20 at 08:49
Yes @LeeGunn, I updated my answer. I added it in the very first post. — Shashank Agrawal, Apr 25 '20 at 09:09
@ShashankAgrawal - ah sorry, the comment wasn't aimed at you - I'm just adding weight to the "correct solution" and not the easy "include the compiler" which people might still be tempted to use. — Lee Gunn, Apr 25 '20 at 09:55
I got your point @LeeGunn and that's okay if you were not aiming at the answer :) Because your comment made me rethink and I improved the answer by moving that option as last resort. — Shashank Agrawal, Apr 25 '20 at 10:34
Updating `@ionic-native/` dependencies solved my issue when I built for production with: `ionic cordova build android --prod`. Thanks! — Ente, Jul 10 '20 at 15:35
I am on angular 11. Updating ionic to latest didnt resolve the issue for me. I had to set aot:false — vigamage, Apr 23 '21 at 03:49

M Fuat · Answer 2 · 2020-03-25T10:17:35.987

29

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

edited Mar 25 '20 at 10:17

answered Feb 21 '20 at 11:34

M Fuat

1,022
2
11
22

1

You sir, are a legend, you have no idea how much time I've lost and I could've just done this. Thank you! – Ruben Szekér Mar 25 '20 at 09:11
1

Thank you, it's my pleasure :) – M Fuat Mar 25 '20 at 12:17

score 6 · Answer 3 · answered Feb 13 '20 at 02:12

6

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

answered Feb 13 '20 at 02:12

Tony

191
1
2

Yes, that I'm aware of @Tony but my concern is that why this error didn't show up in the normal Angular application when upgraded to 9. It only occurred in the Ionic app. May be some configuration issue. – Shashank Agrawal Feb 13 '20 at 05:40

score 4 · Answer 4 · answered Mar 31 '20 at 00:39

4

Running npm update fixed the issue for me.

answered Mar 31 '20 at 00:39

HaniBhat

313
1
7

Yes, that will also work of course, because `npm update` will literally update each & every dependency and you won't have an idea that what's updated & whatnot. That could also lead to other errors. – Shashank Agrawal Mar 31 '20 at 09:21

Trần Quang Hiệp · Answer 5 · 2020-02-18T15:06:53.440

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

edited Feb 18 '20 at 15:06

answered Feb 17 '20 at 13:53

Trần Quang Hiệp

2,297
15
20

Is this a question or you are trying to answer something? – Shashank Agrawal Feb 18 '20 at 04:40
Oh well, updating my @ionic-native dependencies to the latest stable versions actually worked for me. None of the other workarounds mentioned here are needed then. – felschr Feb 18 '20 at 15:04

score 1 · Answer 6 · edited Mar 11 '20 at 06:47

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",

score 1 · Answer 7 · answered Sep 23 '20 at 15:47

1

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.

answered Sep 23 '20 at 15:47

aplon

425
5
23

Same in my case. I am not sure, though, if it is a good practice to turn off "buildOptimizer" for production. My 'gut feeling' is telling me that's an absolute NO. – Server Khalilov Oct 28 '20 at 14:39
totally agree @ServerKhalilov, I am still investigating and "struggling" to make it work and publish a production build, instead of a dev build – aplon Oct 29 '20 at 21:32
Please, update your comment in case you figure out the solution. – Server Khalilov Oct 30 '20 at 10:07
I have been able to "pin it down" to the MSAL related components in package.json (@azure/msal-angular, cordova-plugin-msal, msal). One of those 3 npm packges has an incompatibility issue with IVY. – aplon Dec 17 '20 at 11:07