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

[salah00]

Bug Report

Ionic version: 5.26.0

Current behavior:

I am trying to execute a production build for my ionic 5 app using angular 9 as follows:

ionic build --aot=false --prod --release

It compiles fine but when I host the app on firebase I get the following error on the browser console:

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 K (main.2d39321c110a9a253f2a.js:1) at Function.get (main.2d39321c110a9a253f2a.js:1) at Ye (main.2d39321c110a9a253f2a.js:1) at Zs (main.2d39321c110a9a253f2a.js:1) at main.2d39321c110a9a253f2a.js:1 at Qs.processProvider (main.2d39321c110a9a253f2a.js:1) at main.2d39321c110a9a253f2a.js:1 at main.2d39321c110a9a253f2a.js:1 at Array.forEach () at Se (main.2d39321c110a9a253f2a.js:1)

Expected behavior:

No Error on the browser console should be shown about compiler not loaded

Steps to reproduce:

1. Create a new ionic app based on ionic core version 5.26.0 and Angular core 9.1.7

2. Build application using:

ionic build --prod --release. (aot is set to true in angular.json)

3. Uploade the dist folder to any web server for hosting

4. Alternatively, execute the following:

ng server --prod

5. When the browser starts, the console will have the above error message

Related code:

This is not code dependant and will be prouced for any code based on the ionic and angular version above

A sample application via GitHub

StackBlitz (https://stackblitz.com) Ionic Angular StackBlitz: https://stackblitz.com/edit/ionic-v4-angular-tabs

Plunker (http://plnkr.co/edit/cpeRJs?p=preview)

-->

insert short code snippets here

Other information:

Angular CLI:

Angular CLI: 9.1.7 Node: 12.18.0 OS: darwin x64

Angular: ... Ivy Workspace:

Package Version

@angular-devkit/architect 0.901.7 @angular-devkit/core 9.1.7 @angular-devkit/schematics 9.1.7 @schematics/angular 9.1.7 @schematics/update 0.901.7 rxjs 6.5.4

my project package.json:

{ "name": "newclientapp", "version": "0.0.1", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^9.1.9", "@angular/cdk": "^9.2.4", "@angular/common": "^9.1.9", "@angular/core": "^9.1.9", "@angular/fire": "^5.4.2", "@angular/forms": "^9.1.9", "@angular/material": "^9.2.4", "@angular/platform-browser": "^9.1.9", "@angular/platform-browser-dynamic": "^9.1.9", "@angular/router": "^9.1.9", "@fullcalendar/angular": "^4.4.5-beta", "@fullcalendar/core": "^4.4.2", "@fullcalendar/daygrid": "^4.4.2", "@fullcalendar/timegrid": "^4.4.2", "@ionic-native/core": "^5.26.0", "@ionic-native/geolocation": "^5.26.0", "@ionic-native/splash-screen": "^5.26.0", "@ionic-native/status-bar": "^5.26.0", "@ionic/angular": "^5.1.1", "@mobiscroll/angular": "file:./src/lib/mobiscroll-package/mobiscroll-angular-4.10.3.tgz", "@types/jquery": "^3.3.38", "@types/jqueryui": "^1.12.13", "angularfire2": "^5.4.2", "animate.css": "^3.7.2", "cordova-android": "^8.1.0", "cordova-ios": "^5.1.1", "cordova-plugin-device": "^2.0.3", "cordova-plugin-geolocation": "4.0.2", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^4.2.1", "cordova-plugin-splashscreen": "^5.0.3", "cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-whitelist": "^1.3.4", "cordova-support-android-plugin": "^1.0.2", "cordova-support-google-services": "^1.4.0", "core-js": "^2.6.11", "css-animator": "^2.3.1", "firebase": "^7.15.0", "font-awesome": "^4.7.0", "g": "^2.0.1", "geofirestore": "^3.4.3", "hammerjs": "^2.0.8", "ionic2-calendar": "^0.6.4", "jquery": "^3.5.1", "jquery-ui": "^1.12.1", "jquery-ui-dist": "^1.12.1", "lodash": "^4.17.15", "material-design-icons": "^3.0.1", "moment": "^2.26.0", "ng-animate": "^0.3.4", "primeicons": "^1.0.0", "primeng": "^7.1.3", "quill": "^1.3.7", "rxjs": "^6.5.5", "rxjs-compat": "^6.5.5", "tslib": "^1.13.0", "web-animations-js": "^2.3.2", "zone.js": "^0.10.3" }, "devDependencies": { "@angular-devkit/architect": "^0.901.7", "@angular-devkit/build-angular": "^0.901.7", "@angular-devkit/core": "^9.1.7", "@angular-devkit/schematics": "^9.1.7", "@angular/cli": "^9.1.7", "@angular/compiler": "^9.1.9", "@angular/compiler-cli": "^9.1.9", "@angular/language-service": "^9.1.9", "@ionic/angular-toolkit": "^2.2.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "^2.0.8", "@types/lodash": "4.14.150", "@types/node": "^10.17.24", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^2.1.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.4.4", "ts-node": "^8.10.2", "tslint": "~5.16.0", "typescript": "^3.9.5", "uglify-es": "3.2.2" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": { "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" }, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-sms-receive": {}, "cordova-plugin-geolocation": {} }, "platforms": [ "android", "ios" ] } }

Ionic info:

Ionic:

Ionic CLI : 6.10.0

Utility:

cordova-res : not installed native-run : not installed

System:

NodeJS : v12.18.0 npm : 6.14.4 OS : macOS Catalina

insert the output from ionic info here

[liamdebeasi]

Thanks for the issue. Ionic is fully compatible with Ivy and should not be having this issue. Have you isolated it to a fresh Ionic project?

I have tested this in a fresh Ionic project and was unable to reproduce the issue, so the problem is most likely with your other libs. I am going to close this as this is not a bug in Ionic Framework.

I recommend ensuring you are using the latest Ionic Native and Angular dependencies: https://stackoverflow.com/questions/60183056/ionic-5-with-angular-9-angular-jit-compilation-failed-angular-compiler-not

[salah00]

Dear, I created a new ionic app and I copied my package.json file to the new project and did a fresh npm install. The new project worked with no issues so I am not sure how to identify which of my other libs is causing this issue. Is there a way to identify the devil library??

[liamdebeasi]

When you created a new project, you installed the latest versions of Angular Core and the CLI, so there may have been a version mismatch there in the old project.

[salah00]

Oh boy, that really took some shoe horning to be honest!!

I had to create a new project and install the package.json from my old project.

Finally, found two evil services one at the root folder and one deep into one of the child, child modules.

Should have kept testing the aot built after every change to the code to save the effort and time.

Thanks a lot and sorry for the trouble.

Closing this thread...

[liamdebeasi]

Out of curiosity, what was the ultimate cause of the issue?

[salah00]

Animaion service from animate.css. I didnt need it anymore but perhaps they have a newer version that is compatible with angular 9. Regards,Salah.

Sent from Yahoo Mail on Android

On Wed, 10 Jun 2020 at 0:19, Liam DeBeasinotifications@github.com wrote:

Out of curiosity, what was the ultimate cause of the issue?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.