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

andrehtissot commented 4 years ago

Hello André!!!

1) I'm using:

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

Because I come back from:

import { FCM } from '@ionic-native/fcm/ngx';

... Then I replaced one for other ... is that correct?

2) When I add the plugin:

ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated@7.0.0-beta.0

and build for android I get no errors.

But when I run the app in the android device ... I get a white screen and in the chrome console this messages:

Unhandled Promise rejection: 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. ; Zone: ; Task: Promise.then ; Value: 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.

:8100/polyfills.js:672

FCMPlugin: has been created :8100/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js:21 FCMPlugin: Ready! :8100/plugins/cordova-plugin-fcm-with-dependecy-updated/www/FCMPlugin.js:72

I know this is not a error of the plugin properly ... but I get this error when I add it to the build. I don't get these errors with 4.4.0 or 6.4.0 plugin versions!!!
I attach the package.json dependencies ... just in case.

I appreciate any help.

Thank you so much.

package-dep.txt

Originally posted by @leocharrua in https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated/issues/84#issuecomment-640123222

leocharrua commented 4 years ago

Hello André!!!

Please, see this comment:

https://github.com/angular/angular/issues/35788#issuecomment-606455043

" ... yes we are going to change the main property format sniffing to also look for ESM5 formats (currently it only considers UMD and CommonJS). That should resolve this issue ..."

This say something to you? The plugin has ESM5 format?

andrehtissot commented 4 years ago

I mimicked the current format.

I'll investigate further, but I had no issues on importing and running with import { FCM } from "cordova-plugin-fcm-with-dependecy-updated/ionic/ngx".

@leocharrua, would you create a hello world app that I can debug with? Also, new versions were released today. The v7.0.0-beta.2 brings a better support, but probably not related the issue you faced.

leocharrua commented 4 years ago

Hello André!!! I have some news:

I tried the build in production (ionic cordova build android --prod --release --verbose) and it get stucked :

25% building 105/106 modules 1 active ...p\sofilink4\node_modules\sass-loader\dist\cjs.js??ref--13-3!R:\wamp\app\sofilink4\src\global.scss snapdragon:compiler initializing R:\wamp\app\sofilink4\node_modules\snapdragon\lib\compiler.js +0ms snapdragon:parser initializing R:\wamp\app\sofilink4\node_modules\snapdragon\lib\parser.js +1ms snapdragon:compiler initializing R:\wamp\app\sofilink4\node_modules\snapdragon\lib\compiler.js +4ms snapdragon:parser initializing R:\wamp\app\sofilink4\node_modules\snapdragon\lib\parser.js +0ms Generating ES5 bundles for differential loading...

After remove the plugin (ionic cordova plugin remove cordova-plugin-fcm-with-dependecy-updated), the build get stacked too ... then ... the error not come from the plugin install.

Then I found this:

https://github.com/angular/angular-cli/issues/16515#issuecomment-571718620

In the tsconfig.json file I changed "target": "es2015" by "es5"

I Installed the plugin again (beta 2).

and now the build finished and de app ran ok ... include custom sounds in notifications ;) !!!

Others comments:

When I build the app I get this messages:

[cordova] Note: R:\wamp\app\sofilink4\platforms\android\app\src\main\java\com\gae\scaffolder\plugin\FCMPlugin.java uses or overrides a deprecated API. [cordova] Note: Recompile with -Xlint:deprecation for details.

Is something to worry?

Thanks

andrehtissot commented 4 years ago

This is something I've already noticed and will be addressed soon. I'll created a specific issue to keep this transparent.

But for now, congratulations!

leocharrua commented 4 years ago

Thanks André!!!

QuentinFarizon commented 4 years ago

Hello @andrehtissot (and thanks again !) I'm encountering the same issue now that I've switched to 7.x version (I clearly pointed the issue to a commit upgrading only your library to 7.0.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.

Disabling ivy compilation, disabling AoT, or switching to es5 make it work as workarounds, but it's far from ideal.

This seems to be due to the format/minification of this library, see https://github.com/angular/angular/issues/35269 and https://github.com/angular/angular/issues/35255, but I'm not sure what's wrong in your configuration.

QuentinFarizon commented 4 years ago

Nevermind it's ok after a full rebuild of dependencies : rm -rf node_modules/ plugins/ platforms/android/ && npm install :thinking:

andrehtissot commented 4 years ago

No problem, @QuentinFarizon 😁

Let me know if it happens again.

lena0204 commented 3 years ago

Hello @andrehtissot

I'm still experiencing this issue though only under very specific conditions. In my project I'm also serving the app as web page without cordova, just Angular and Ionic. The (Angular) build is done using a pipeline, the build is successful but when I open the web page I have the same issue as the others:

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:562)
    at Function.get (core.js:10831)
    at getFactoryDef (core.js:1850)
    at providerToFactory (core.js:11382)
    at providerToRecord (core.js:11369)
    at R3Injector.processProvider (core.js:11267)
    at core.js:11253
    at core.js:1146
    at Array.forEach (<anonymous>)
    at deepForEach (core.js:1146)

As the others mentioned before, it seems to be related with the new Angular compiler Ivy and turning it off removes the issue. I tried to reproduce the issue in your Ionic 5 example after upgrading it to Angular 10. The fork is available here: https://github.com/lena0204/cordova-plugin-fcm-with-dependecy-updated-ionic-v5-example, my tests are on an own branch.

Steps to reproduce the issue:

Clone the repo
Run npm install
Run ng build --prod
Change to www directory
Serve the www directory using npx serve -s (requires serve package to be installed)

Interestingly after I added cordova to the project (ionic cordova platform add android) and then tried a new build, the issue is gone. So maybe without cordova some setup or build process is incorrect. Can you imagine why this happens and how to fix it?

Environment:

Developer OS and version: Windows 10
NodeJS 14.15.1, NPM 6.14.8
Angular: 10.2.3
Ionic-Angular: 5.3.0
FCM Plugin: 7.3.1
Cordova CLI version (cordova --version): 9.0.0

wildbananastiia commented 3 years ago

Hi @lena0204!

I had the same error and was able to fix it for Windows10. Try the latest changes for this plugin. rm -rf node_modules/ plugins/ platforms/android/; npm i cordova-plugin-fcm-with-dependecy-updated@latest; npm i

Geschan commented 3 years ago

I'm having the same issue - getting the Error: Angular JIT compilation failed: '@angular/compiler' not loaded! when using import { FCM } from "cordova-plugin-fcm-with-dependecy-updated/ionic/ngx"; instead of the ionic native plugin.

Is there any solution for this besides of disabling Ivy?

Stephane84 commented 3 years ago

[As this issue is closed, i create a new one] : https://github.com/andrehtissot/cordova-plugin-fcm-with-dependecy-updated/issues/239

Hello, 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 the same error than others at runtime (not compile) : Error: Angular JIT compilation failed: '@angular/compiler' not loaded! It happen with v7.8.0 of the plugin when i build with --prod option and http-serve the www folder, or run it in emulator Android or iOS (standard build is ok)

Environment :

node 12.18.2
npm 6.14.5
ionic 6.12.2
cordova 9.0.0

You can reproduct it from a fresh ionic app, with this steps (note it is in angular 11 now) :

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

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 or NativeHttpModule from ionic-native-http-connection-backend, and other ...) ==> moreover, it seems to not be the best solution

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

Fuhji commented 2 years ago

I hit this issue moving from Angular 10.x to 11.x - Error: Angular JIT compilation failed: '@angular/compiler' not loaded!

Disabling Ivy/optimisation 'fixes' the issue, but not a real solution for production.

I commented-out all other plugins and the cause was, sadly, this plugin. Is the plugin no longer active/maintained @andrehtissot ?

mcastets commented 2 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).

ramikhafagi96 commented 2 years ago

Could someone please explain to me why @mcastets solution works?

@andrehtissot

andrehtissot / cordova-plugin-fcm-with-dependecy-updated

v7b/ngx: Angular JIT compilation failed: '@angular/compiler' not loaded! #93