v7/ngx: Angular JIT compilation failed: '@angular/compiler' not loaded!

Stephane84 commented 3 years ago

Describe the bug

Hello, I have the same bug than this issue : https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated/issues/93 (closed, but theres are still people with pb)

i have an ionic3 app (angular 5) and i'm migrating it on ionic5 (angular 10) In ionic3, i used cordova-plugin-fcm-with-dependecy-updated: "7.0.3" and it works well In ionic5, i have an error at runtime when launch the app (not compile) when build with -prod flag : Error: Angular JIT compilation failed: '@angular/compiler' not loaded! And it display a white screen of death It happen with v7.8.0 of the plugin with --prod option and http-serve the www folder, or run it in emulator Android or iOS (standard build is ok)

To Reproduce

You can reproduct it from a fresh ionic app, with this steps (note it is in angular 11 now) : (if you use a proxy, do first : export PROXY=[your proxy]

ionic start testangularjiterror blank --type=angular --cordova --confirm
answer y for cordova and n for ionic account
cd testangularjiterror
ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
npm install @ionic-native/core

In file src/app/app.module.ts, juste add :

import {FCM} from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    FCM
  ],

Continue in bash :

npm run build -- --prod
cd www
npm install -g http-server (if you don't have)
http-server

Then go in your navigator to localhost:8080, and you will have the stack

Expected behavior

It should work !

Screenshots White screen of death

Environment (please complete the following information):

node 12.18.2
npm 6.14.5
ionic 6.12.2
cordova 9.0.0

Others Infos I try many suggests of others issues :

In the tsconfig.json file I changed "target": "es2015" by "es5" ==> It doesn't work

"angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true, "enableIvy": false } ==> It works but it break others things in my app (import in appmodule of mdTransitionAnimation from @ionic/angular is break, NativeHttpModule from ionic-native-http-connection-backend too, and other like modal that should be import in app.module directly...) ==> moreover, it seems to not be the best solution to disable this new angular mode

So, is there any solution for this bug ? Thanks for your help

mcastets commented 3 years ago

Hi, I also hit the issue and the only proper workaround I've eventually found is to change my import to:

import {FCM} from 'cordova-plugin-fcm-with-dependecy-updated/ionic';

And then, I update my usage from:

this.fcm.onTokenRefresh()

to:

FCM.onTokenRefresh()

FCM has also be removed from the providers array in the app module.

Beware, that you should be using this.ngZone.run in the callbacks if you need to give some hints to Angular (for instance if you need to reflect changes about a variable update).