Ionic 5 upgrade issue

Just upgraded my project to Ionic 5 and also update angular to version 9, now my project won’t launch I get the following 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:16082)
    at getInjectableDef (core.js:362)
    at injectableDefOrInjectorDefFactory (core.js:16834)
    at providerToFactory (core.js:16920)
    at providerToRecord (core.js:16904)
    at R3Injector.processProvider (core.js:16720)
    at core.js:16699
    at core.js:1367
    at Array.forEach (<anonymous>)
1 Like

if I change aot: true to aot: false in my angular.json file it all works again, which seems to contradict the message :confused:

I compared the previous angular.json and that didn’t have aot: true in that location so I removed it and now everything serves. Whether this will work when deployed to a device is anybodies guess!

Can you post the devDependencies stanza of your package.json?

I had the same issue but left angular.json alone. I changed main.ts to add import ‘@angular/compiler’; with the imports at the top and I can now do ionic serve. Didn’t have this issue pre Angular 9 and with Ionic 4.

Wat to add import '@angular/compiler'; in main.ts file.

I upgraded my Ionic application to Ionic 5 the day of the release as soon as I saw their tweet and I had the same issue.

See my answer here https://stackoverflow.com/questions/60183056/ionic-5-with-angular-9-angular-jit-compilation-failed-angular-compiler-not/60183174#60183174

Adding import '@angular/compiler'; in main.ts file worked but hoping the Ionic team will resolve this issue.

Yes, that will work once you deploy it as app. The AOT flag was earlier used to comes into action only when you build the app with --prod flag in for production build but since Angular 9 , it is now also enabled for development mode.

This helps catching the code errors sooner in development mode only. But someone Ionic 5 is having some issue with that flag for development. So that is fine. Check my other comment for solutions.

Came back to my project today, updated Ionic and now nothing works again…

npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @angular-devkit/core@~8.2.14.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'ionic-selectric'
npm ERR! notarget

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/andy/.npm/_logs/2020-02-20T19_56_59_017Z-debug.log

Crikey I went through and ran

npm install @latest

On everything I could see for both angular and ionic and then the dependencies that came and now it’s working again!!

I there not a quick and easy way of just running command that updates your Ionic project to the latest compatible software versions?

I’ve upgraded from Ionic 4/Angular 7 to Ionic 5/Angular 9, and I’m running my app in the Android emulator (ionic serve is working OK).

Nothing’s helping me. I had “aot: true” in my angular.json - removed them, but still got the error. I added import '@angular/compiler'; to my main.ts - didn’t help.

I still get:

[INFO:CONSOLE(3002)] "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.", source: http://localhost/main-es2015.js (3002)

Did you follow the Angular upgrade process/guide?

I did… Now it’s working. After fiddling around with aot options and imports, and then I thought reverting all of my changes, I’m not sure what made it start working.

I’m back to square 1. My production/release build works OK. I’m trying to get a test configuration working (I copied my “production” configuration in angular.json and renamed it to “uat”, and left “aot” true). When I build with ionic cordova build android --configuration uat, and run it on the emulator, I get the same old errors:

Line 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.

I get this whether aot is true or false in my angular.json for my uat configuration. I’ve upgraded all of my ionic-native packages to the latest. Adding an explicit import '@angular/compiler'; changes nothing.

Edit: I got it working by setting both aot and buildOptimizer to false in my angular.json’s “uat” build config. The conclusion I draw from this is that you can’t use aot in a non-production build. Whyyyy?

Edit2: Now my prod build doesn’t work and is giving me the error. I have to set aot and buildOptimizer to false for prod builds as well. What fresh hell is this?

I am also getting the same error with ionic 5 and angular 9.

This is crazy and no solution mentioned above ever worked except setting aot and buildoptimizer to false.

My application is slow because of this.

I really hope the ionic team will fix this issue it’s embarassing!!

It’s going to be challenging to say much without access to code that reproduces your problem. If you don’t wish to publicize the entire app, can you create a publicly-accessible stripped-down repository that displays the problem?

If it’s any motivation, it’s conceivable that even attempting to go through this process will show you that you’ve got a particular problematic dependency.

I upgraded project a project with no problems in my first try. Removed changes and start from scratch. this time make sure to follow the upgrade guide provided by the Ionic team.