Ionic 5 was announced a few hours ago (12th Feb 2020) and I upgraded my one of the small production app to Ionic 5 along with Angular 9:
# To update to Ionic 5
npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save-exact --save
# To update to Angular 9
ng update @angular/core @angular/cli
But when I did ionic serve, I started getting the bellow 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:16065)
at getInjectableDef (core.js:362)
at injectableDefOrInjectorDefFactory (core.js:16816)
I came across a few Angular GitHub issues:
They are saying to include import '@angular/compiler'; in main.ts file but when I matched one of my other Angular 9 application (which I updated recently), I don't see such configurations there.
Is Angular 9 not compatible with Ionic 5?
Try ng serve --aot, it helped me fix the problem, that's if you want to run with aot which is recommended since it will be similar to the production build and it will help you catch errors sooner.
Hope this helps.
Angular Link: https://angular.io/guide/aot-compiler
Because of ionic update not fast enough, you can try:
npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -S work for me.
update 2020/02/18 => we can run npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -S now to get latest stable version
For Angular:
Stopping the terminal and re-serve it ng serve solved the problem for me.
need to update ionic as well, it will work. For angular when update version it updates all dependent itself. But in ionic need to update manually.
"@angular/common": "9.0.5",
"@angular/core": "9.0.5",
"@angular/forms": "9.0.5",
"@angular/platform-browser": "9.0.5",
"@angular/platform-browser-dynamic": "9.0.5",
"@angular/router": "9.0.5",
"@ckeditor/ckeditor5-angular": "1.2.2",
"@ckeditor/ckeditor5-build-classic": "17.0.0",
"@ionic-native/camera": "5.22.0",
"@ionic-native/core": "5.22.0",
"@ionic-native/crop": "5.22.0",
"@ionic-native/device": "5.22.0",
"@ionic-native/diagnostic": "5.22.0",
"@ionic-native/document-viewer": "5.22.0",
"@ionic-native/file": "5.22.0",
"@ionic-native/file-opener": "5.22.0",
"@ionic-native/file-path": "5.22.0",
"@ionic-native/file-transfer": "5.22.0",
"@ionic-native/fingerprint-aio": "5.22.0",
"@ionic-native/image-picker": "5.22.0",
"@ionic-native/in-app-browser": "5.22.0",
"@ionic-native/network": "5.22.0",
"@ionic-native/splash-screen": "5.22.0",
"@ionic-native/status-bar": "5.22.0",
"@ionic-native/toast": "5.22.0",
Running npm update fixed the issue for me.
Tried several ways, including npm update, with no success. The only way I could get Ionic 5 with Angular 9 to work in production mode, was setting "aot": false and "buildOptimizer": false in angular.json.
Actually theres was no @ionic in my .json file. But after lots of inspect, i found that i wrote some modules of angular forms(Validator, FormGroup, FromControl) within the import of ngModule.
And also used module in a wrong way, Example: instead of importing MatSnackBarModule, import MatSnackBar in .ts file of that specific component where you want to import and similarly for other remaining modules also, dont write them with Module as suffix.
but import MatSnackBarModule entirely in app.module.ts file.
Note: I explained above taking MatSnackBar as example , it implies for anyother module as well.