Ionic 5 mit Angular 9 - Angular JIT-Kompilierung fehlgeschlagen: '@ angle / compiler' nicht geladen

23

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?

Shashank Agrawal
quelle

Antworten:

33

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:

Geben Sie hier die Bildbeschreibung ein

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

Shashank Agrawal
quelle
4
Lösung 1 hat für mich funktioniert
John East
Lösung 1 funktionierte auch
Srdan
1
Das Upgrade von @ ionic / native hat bei mir funktioniert. Versuchen Sie am besten, den Compiler nach Möglichkeit nicht einzuschließen, da dies die Größe Ihrer Ausgabedatei erhöhen wird.
Lee Gunn
1
@ShashankAgrawal - ah sorry, der Kommentar war nicht auf Sie gerichtet - ich füge nur der "richtigen Lösung" Gewicht hinzu und nicht dem einfachen "Include the Compiler", den die Leute möglicherweise noch in Versuchung führen.
Lee Gunn
1
Ich habe Ihren Punkt @LeeGunn verstanden und das ist in Ordnung, wenn Sie nicht auf die Antwort zielen :) Weil Ihr Kommentar mich zum Umdenken gebracht hat und ich die Antwort verbessert habe, indem ich diese Option als letzten Ausweg verschoben habe.
Shashank Agrawal
5

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

M Fuat NUROĞLU
quelle
Sie, Sir, sind eine Legende, Sie haben keine Ahnung, wie viel Zeit ich verloren habe, und ich hätte das einfach tun können. Vielen Dank!
Ruben Szekér
Danke, es ist mir ein Vergnügen :)
M Fuat NUROĞLU
2

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

Tony
quelle
Ja, mir ist @Tony bekannt, aber ich mache mir Sorgen, dass dieser Fehler in der normalen Angular-Anwendung beim Upgrade auf 9 nicht angezeigt wurde. Er trat nur in der Ionic-App auf. Möglicherweise liegt ein Konfigurationsproblem vor.
Shashank Agrawal
1

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

Trần Quang Hiệp
quelle
Ist das eine Frage oder versuchen Sie etwas zu beantworten?
Shashank Agrawal
Na ja, das Aktualisieren meiner @ ionic-nativen Abhängigkeiten auf die neuesten stabilen Versionen hat bei mir tatsächlich funktioniert. Dann ist keine der anderen hier genannten Problemumgehungen erforderlich.
FelschR
0

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

Laufen hat npm updatedas Problem für mich behoben.

HaniBhat
quelle
Ja, das wird natürlich auch funktionieren, da npm updatebuchstäblich jede Abhängigkeit aktualisiert wird und Sie keine Ahnung haben, was aktualisiert wird und was nicht. Das könnte auch zu anderen Fehlern führen.
Shashank Agrawal