Might not be an Ionic issue but...Angular JIT compilation failed: '@angular/compiler' not loaded!

I’m a little green to Ionic/Angular and am not entirely sure where the dividing line between the two is so…

Angular CLI: 9.1.2
OS: win32 x64
Angular: 9.1.13
… animations, common, compiler, compiler-cli, core, forms
… language-service, platform-browser, platform-browser-dynamic
… router, service-worker
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.803.29
@angular-devkit/build-angular 0.1000.8
@angular-devkit/build-optimizer 0.1000.8
@angular-devkit/build-webpack 0.1000.8
@angular-devkit/core 10.2.4
@angular-devkit/schematics 10.2.4
@angular/http 7.2.16
@ngtools/webpack 10.0.8
@schematics/angular 13.3.0
@schematics/update 0.901.2 (cli-only)
rxjs 6.6.7
typescript 3.8.2
webpack 4.43.0

Using “ionic serve” at the command line, my app seems to compile with no errors present in the terminal window. At the completion of compiling in the terminal window, a browser (chrome) tab is opened and I can see my favicon in the tab but the browser tab is blank. F12 shows the console and this is what it says:

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’ve googled every piece of this message and gone down some trippy rabbit holes and I always come back to this. I’m sure this isn’t enough info to get the help I need so I’m happy to provide whatever details I can. Thanks in advance.

Joe

Hey there

You seem to be running old versions of angular and maybe versions of packages that dont go along

Is this a new project or an existing?

This is an existing app. So it seems reasonable that there would be some dependency version incompatibility problem. There were some errors to that effect initially, but I addressed each one that came up (so I believe). And the compile process shows no errors. Is it possible that there are issues with incompatibility that won’t show an error? If so, holy crap!

More info…

I’ve manually updated every dependency in my package.json, deleted node_modules and package-lock.json, and did npm install.

The app compiles successfully with the little green check mark. No errors. When the browser opens it’s blank. The console now says “Error: JIT compiler unavailable”

Angular CLI: 13.3.0
Node: 14.19.1
Package Manager: npm 6.14.16
OS: win32 x64

Angular: 13.3.0
… animations, cli, common, compiler, compiler-cli, core, forms
… language-service, platform-browser, platform-browser-dynamic
… router, service-worker

Package Version

@angular-devkit/architect 0.1303.0
@angular-devkit/build-angular 13.3.0
@angular-devkit/core 13.3.0
@angular-devkit/schematics 13.3.0
@angular/http 7.2.16
@schematics/angular 13.3.0
rxjs 7.5.5
typescript 4.6.3

Ionic:
Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 6.0.13
@angular-devkit/build-angular : 13.3.0
@angular-devkit/schematics : 13.3.0
@angular/cli : 13.3.0
@ionic/angular-toolkit : 6.1.0

Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : not available
Cordova Plugins : not available

Utility:
cordova-res : 0.15.4
native-run : 1.5.0

System:
NodeJS : v14.19.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.16
OS : Windows 10

I am wondering how you resolved which issues- using npm?

Can you post the full package.json here - the one before you did stuff and after?

As a general rule I rather use upgrade guides to upgrade angular projects. And definitely ignore recommendations from npm until I am sure this wont mess things up

Update…my issue is cordova-plugin-fcm-with-dependecy-updated. This was the plugin I was using for receiving push notifications in this mobile app. After a ton of trial and error, it finally came down to this as the culprit.

Turns out it’s no longer supported. Either I have to dig into the code and bring the plugin current, or sniff around for another push notification solution.

Then I’ll look into the effects of updating all the other libraries and plugins and see if the app code will still be compatible.

Thanks for taking an interest!

2 Likes

Was getting the same problem with FCM and then moved over to the @awesome-cordova-plugins/fcm package and it worked again