Ionic 5 a été annoncé il y a quelques heures (12 février 2020) et j'ai mis à niveau mon l'une des petites applications de production vers Ionic 5 avec 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

Mais quand je l'ai fait ionic serve, j'ai commencé à avoir l'erreur ci-dessous:

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)

Je suis tombé sur quelques problèmes avec GularHub Angular:

1. https://github.com/angular/angular-cli/issues/16873
2. https://github.com/angular/angular/issues/32466

Ils disent d'inclure import '@angular/compiler';dans le main.tsfichier, mais quand j'ai fait correspondre une de mes autres applications Angular 9 (que j'ai mise à jour récemment), je ne vois pas de telles configurations là-bas.

Angular 9 n'est-il pas compatible avec Ionic 5?

Solution mise à jour et correcte pour résoudre ce problème

Sur la base de la réponse de Tran Quang , je suis allé voir le CHANGELOG.md de ionic-nativeet est venu à savoir qu'ils ont récemment mis à jour leur package pour compiler avec 9 angulaire.

Par conséquent, vous devez mettre à jour toutes / toutes les dépendances de @ionic-native. Pour cela, regardez toutes les dépendances de votre package.gsonfichier qui commencent par @ionic-native/et mettez-les à jour une par une.

Par exemple, voici mon package.gson:

J'ai donc dû exécuter les commandes suivantes pour mettre à jour toutes mes @ionic-nativedépendances:

npm i @ionic-native/core@latest
npm i @ionic-native/camera@latest
npm i @ionic-native/firebase-x@latest
npm i @ionic-native/splash-screen@latest
npm i @ionic-native/status-bar@latest

Vous devez faire de même pour vos @ionic-nativedépendances. Assurez-vous simplement que ceux-ci sont mis à jour au minimum v5.21.5(car certaines anciennes versions ne fonctionnaient pas).

Vive 😀🎉🎊

Si pour une raison quelconque, vous ne pouvez pas mettre à jour vos @ionic-nativedépendances, consultez ma réponse d'origine pour différentes solutions / solutions ⬇️

Réponse originale

Pour moi, les solutions suivantes ont fonctionné. Je ne sais pas s'ils sont parfaits à ajouter, mais j'espère que l'équipe Ionic corrigera ce problème car ces solutions n'étaient pas nécessaires lorsque j'ai mis à niveau mon application Angular ordinaire vers Angular 9.

Solution 1

Éteignez l'AOT en changeant "aot": trueà "aot: falseen angular.jsonfichier. Je ne recommanderais pas cela car cela améliore les performances de l'application Angular et améliore la capture des codes d'erreur en mode développement.

Solution 2

Si vous ne souhaitez pas vous connecter angular.jsonet souhaitez résoudre ce problème ionic serveuniquement, passez l' --aot=falseindicateur à la ngcommande en utilisant --:

ionic serve -- --aot=false

Solution 3 (option aveugle)

Si aucune des solutions ci-dessus ne fonctionne pour vous, vous pouvez exécuter une commande npm updatequi mettra à jour littéralement toutes les dépendances de votre package.json(cela signifie que les dépendances ioniques seront également mises à jour).

Il s'agit d'une option aveugle, car vous ne saurez pas quelles sont les dépendances mises à jour et quelles sont les modifications de rupture dans ces dépendances mises à jour. Vous pourriez donc finir par résoudre d'autres problèmes à cause de cela.

Donc, c'est à vous de prendre ce risque :) Eh bien, cela vaut la peine de le faire si votre application n'est pas si grande ou n'utilise aucun code supprimé dans les nouvelles dépendances.

Solution 4 (la dernière et la pire option)

Ajouter import '@angular/compiler';au main.tsfichier. Mais cela pourrait augmenter la taille du bundle.

Supplémentaire

Lors de la mise à niveau d'Ionic, vous pourriez rencontrer un autre problème en raison d'une erreur importdans polyfills.ts. Si oui, consultez src / zone-flags.ts manquant dans la compilation TypeScript après la mise à niveau vers Ionic 5

Pour Angular: l'arrêt du terminal et sa remise en service ont ng serverésolu le problème pour moi.

Essayez ng serve --aot, cela m'a aidé à résoudre le problème, c'est si vous voulez exécuter avec aot, ce qui est recommandé car il sera similaire à la version de production et cela vous aidera à détecter les erreurs plus tôt.

J'espère que cela t'aides.

Lien angulaire: https://angular.io/guide/aot-compiler

En raison de la mise à jour ionique pas assez rapide, vous pouvez essayer: npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -Stravaillez pour moi.

update 2020/02/18 => nous pouvons exécuter npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -Smaintenant pour obtenir la dernière version stable

besoin de mettre à jour ionique aussi, cela fonctionnera. Pour angulaire lors de la mise à jour de la version, il met à jour tous les dépendants lui-même. Mais dans ionic besoin de mettre à jour manuellement.

"@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",

La course a npm updaterésolu le problème pour moi.