Ionic 5 avec Angular 9 - La compilation Angular JIT a échoué: '@ angular / compiler' non chargé

25

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?

Shashank Agrawal
la source

Réponses:

34

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:

entrez la description de l'image ici

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

Shashank Agrawal
la source
4
La solution 1 a fonctionné pour moi
John East
La solution 1 a également fonctionné
Srdan
1
La mise à niveau de @ ionic / native a fonctionné pour moi. Mieux vaut essayer de ne pas inclure le compilateur si possible car cela va augmenter la taille de votre fichier de sortie.
Lee Gunn
1
@ShashankAgrawal - ah désolé, le commentaire ne vous visait pas - j'ajoute simplement du poids à la "bonne solution" et pas à la simple "inclure le compilateur" que les gens pourraient encore être tentés d'utiliser.
Lee Gunn
1
J'ai compris @LeeGunn et c'est correct si vous ne visiez pas la réponse :) Parce que votre commentaire m'a fait repenser et j'ai amélioré la réponse en déplaçant cette option en dernier recours.
Shashank Agrawal
5

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

M Fuat NUROĞLU
la source
Vous, monsieur, êtes une légende, vous n'avez aucune idée du temps que j'ai perdu et j'aurais pu le faire. Je vous remercie!
Ruben Szekér
Merci, c'est mon plaisir :)
M Fuat NUROĞLU
2

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

Tony
la source
Oui, je suis au courant de @Tony mais ma préoccupation est la raison pour laquelle cette erreur ne s'est pas affichée dans l'application Angular normale lors de la mise à niveau vers 9. Elle ne s'est produite que dans l'application Ionic. Peut être un problème de configuration.
Shashank Agrawal
1

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

Trần Quang Hiệp
la source
Est-ce une question ou vous essayez de répondre à quelque chose?
Shashank Agrawal
Eh bien, la mise à jour de mes dépendances @ ionic-native vers les dernières versions stables a vraiment fonctionné pour moi. Aucune des autres solutions de contournement mentionnées ici n'est alors nécessaire.
FelschR
0

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",
Shyam Vashista
la source
0

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

HaniBhat
la source
Oui, cela fonctionnera également bien sûr, car cela npm updatemettra littéralement à jour chaque dépendance et vous n'aurez aucune idée de ce qui est mis à jour et ainsi de suite. Cela pourrait également conduire à d'autres erreurs.
Shashank Agrawal