Ionic 5 wurde vor einigen Stunden (12. Februar 2020) angekündigt und ich habe meine kleine Produktions-App zusammen mit Angular 9 auf Ionic 5 aktualisiert:

# 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

Aber als ich das tat ionic serve, bekam ich den folgenden Fehler:

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)

Ich bin auf einige Probleme mit Angular GitHub gestoßen:

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

Sie sollen import '@angular/compiler';in die main.tsDatei aufgenommen werden, aber wenn ich mit einer meiner anderen Angular 9-Anwendungen übereinstimmte (die ich kürzlich aktualisiert habe), werden solche Konfigurationen dort nicht angezeigt.

Ist Angular 9 nicht mit Ionic 5 kompatibel?

Aktualisierte und korrekte Lösung, um dies zu beheben

Basierend auf der Antwort von Tran Quang habe ich mir CHANGELOG.md von angesehen ionic-nativeund erfahren, dass sie kürzlich ihr Paket aktualisiert haben, um es mit Angular 9 zu kompilieren.

Daher müssen Sie alle Abhängigkeiten von aktualisieren @ionic-native. Sehen Sie sich dazu alle Abhängigkeiten in Ihrer package.gsonDatei an, die mit beginnen, @ionic-native/und aktualisieren Sie sie nacheinander.

Zum Beispiel ist dies mein package.gson:

Daher musste ich die folgenden Befehle ausführen, um alle meine @ionic-nativeAbhängigkeiten zu aktualisieren :

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

Gleiches müssen Sie für Ihre @ionic-nativeAbhängigkeiten tun . Stellen Sie nur sicher, dass diese mindestens auf aktualisiert werden v5.21.5(da einige alte Versionen nicht funktionierten).

Prost 😀🎉🎊

Wenn Sie Ihre @ionic-nativeAbhängigkeiten aus irgendeinem Grund nicht aktualisieren können , lesen Sie meine ursprüngliche Antwort für verschiedene Problemumgehungen / Lösungen

Ursprüngliche Antwort

Für mich haben die folgenden Lösungen funktioniert. Ich bin mir nicht sicher, ob sie perfekt zum Hinzufügen sind, hoffe aber, dass das Ionic-Team dies behebt, da diese Lösungen nicht benötigt wurden, als ich meine einfache Angular-App auf Angular 9 aktualisiert habe.

Lösung 1

Schalten Sie den AOT aus, indem Sie "aot": truezu "aot: falseIn- angular.jsonDatei wechseln . Ich würde dies nicht empfehlen, da dies die Leistung der Angular-App verbessert und das Abfangen von Fehlercodes im Entwicklungsmodus verbessert.

Lösung 2

Wenn Sie sich nicht ändern möchten angular.jsonund dieses Problem ionic servenur beheben möchten , übergeben Sie das --aot=falseFlag an den ngBefehl, indem Sie Folgendes verwenden --:

ionic serve -- --aot=false

Lösung 3 (blinde Option)

Wenn keine der oben genannten Lösungen für Sie funktioniert, können Sie einen Befehl ausführen, npm updateder buchstäblich alle Abhängigkeiten von Ihnen package.jsonaktualisiert (dh, die ionischen Abhängigkeiten werden ebenfalls aktualisiert).

Dies ist eine blinde Option, da Sie nicht wissen, welche Abhängigkeiten aktualisiert werden und welche Änderungen in diesen aktualisierten Abhängigkeiten vorgenommen werden. Aus diesem Grund können Sie möglicherweise andere Probleme beheben.

Es liegt also an Ihnen, dieses Risiko einzugehen :) Nun, dies lohnt sich, wenn Ihre App nicht so groß ist oder keine Codes verwendet, die in den neueren Abhängigkeiten entfernt wurden.

Lösung 4 (die letzte und schlechteste Option)

Fügen Sie import '@angular/compiler';in main.tsDatei. Dies kann jedoch die Bündelgröße erhöhen.

Extra

Während Ionic aktualisieren, könnten Sie ein anderes Problem konfrontiert wegen falsch importin polyfills.ts. Wenn ja, überprüfen Sie, ob src / zone-flags.ts nach dem Upgrade auf Ionic 5 in der TypeScript-Kompilierung fehlt

Für Angular: Das Anhalten des Terminals und das erneute Servieren haben ng servedas Problem für mich gelöst.

Versuchen Sie ng serve --aot, es hat mir geholfen, das Problem zu beheben. Wenn Sie mit aot arbeiten möchten, wird dies empfohlen, da es dem Produktions-Build ähnelt und Ihnen hilft, Fehler früher zu erkennen.

Hoffe das hilft.

Angular Link: https://angular.io/guide/aot-compiler

Da das ionische Update nicht schnell genug ist, können Sie versuchen: npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -Sfür mich arbeiten.

Update 2020/02/18 => Wir können npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -Sjetzt laufen , um die neueste stabile Version zu erhalten

müssen auch ionic aktualisieren, es wird funktionieren. Für eckige Update-Version werden alle abhängigen selbst aktualisiert. Aber in ionic müssen manuell aktualisiert werden.

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

Laufen hat npm updatedas Problem für mich behoben.