Ionic 5 z Angular 9 - Kompilacja Angular JIT nie powiodła się: „@ angular / compiler” nie został załadowany

23

Ionic 5 został ogłoszony kilka godzin temu (12 lutego 2020 r.) I zaktualizowałem moją małą aplikację produkcyjną do Ionic 5 wraz z 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

Ale kiedy to zrobiłem ionic serve, zacząłem pojawiać się poniżej:

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)

Natknąłem się na kilka problemów Angular GitHub:

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

Mówią na to import '@angular/compiler';w main.tspliku, ale kiedy dopasowane jedno z moich innych Kątowymi 9 wniosku (co ja niedawno zaktualizowany), nie widzę tam takie konfiguracje.

Czy Angular 9 nie jest kompatybilny z Ionic 5?

Shashank Agrawal
źródło

Odpowiedzi:

33

Zaktualizowane i poprawne rozwiązanie, aby to naprawić

Na podstawie odpowiedzi z Tran Quang , poszedłem zobaczyć CHANGELOG.md się ionic-nativei poznał, że niedawno zaktualizowany ich pakiet skompilować z kątowym 9.

Dlatego musisz zaktualizować dowolne / wszystkie zależności @ionic-native. W tym celu przejrzyj wszystkie zależności w package.gsonpliku, które zaczynają się od, @ionic-native/i aktualizuj je jeden po drugim.

Na przykład to moje package.gson:

wprowadź opis zdjęcia tutaj

Musiałem więc uruchomić następujące polecenia, aby zaktualizować wszystkie moje @ionic-nativezależności:

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

To samo, co musisz zrobić dla swoich @ionic-nativezależności. Tylko upewnij się, że są one aktualizowane do minimum v5.21.5(ponieważ kilka starych wersji nie działało).

Pozdrawiam 😀🎉🎊

Jeśli z jakiegoś powodu nie możesz zaktualizować swoich @ionic-nativezależności, spójrz na moją oryginalną odpowiedź na różne obejścia / rozwiązania ⬇️


Oryginalna odpowiedź

Dla mnie zadziałały następujące rozwiązania. Nie jestem pewien, czy są idealne do dodania, ale mam nadzieję, że zespół Ionic to naprawi, ponieważ te rozwiązania nie były potrzebne, gdy zaktualizowałem moją zwykłą aplikację Angular do Angular 9.

Rozwiązanie 1

Wyłącz AOT, zmieniając "aot": truena "aot: falsew angular.jsonpliku. Nie poleciłbym tego, ponieważ poprawia to wydajność aplikacji Angular i poprawia przechwytywanie kodów błędów w trybie programowania.

Rozwiązanie 2

Jeśli nie chcesz się zmieniać angular.jsoni chcesz tylko rozwiązać ten problem ionic serve, przekaż --aot=falseflagę do ngpolecenia, używając --:

ionic serve -- --aot=false

Rozwiązanie 3 (opcja w ciemno)

Jeśli żadne z powyższych rozwiązań nie działa dla Ciebie, możesz uruchomić polecenie, npm updatektóre zaktualizuje dosłownie wszystkie zależności z twojego package.json(to znaczy, że zależności jonowe również zostaną zaktualizowane).

Jest to opcja ślepa, ponieważ nie masz pojęcia, które zależności są aktualizowane i jakie są przełomowe zmiany w tych zaktualizowanych zależnościach. Dlatego możesz z tego powodu rozwiązać inne problemy.

Więc to od Ciebie zależy, czy podejmiesz to ryzyko :) Cóż, warto to zrobić, jeśli Twoja aplikacja nie jest tak duża lub nie używa żadnych kodów usuniętych w nowszych zależnościach.

Rozwiązanie 4 (ostatnia i najgorsza opcja)

Dodaj import '@angular/compiler';w main.tspliku. Ale może to zwiększyć rozmiar pakietu.

Dodatkowy

Podczas uaktualniania jonowe, można zmierzyć się kolejny problem, ponieważ od zła importw polyfills.ts. Jeśli tak, sprawdź, czy po kompilacji TypeScript po aktualizacji do Ionic 5 brakuje src / zone-flags.ts.

Shashank Agrawal
źródło
4
Rozwiązanie 1 zadziałało dla mnie
John East
Rozwiązanie 1 również działało
Srdan,
1
Uaktualnienie @ ionic / native działało dla mnie. Najlepiej, jeśli to możliwe, nie dołączaj kompilatora, ponieważ zwiększy on rozmiar pliku wyjściowego.
Lee Gunn,
1
@ShashankAgrawal - przepraszam, komentarz nie był skierowany do ciebie - po prostu dodałem wagę do „poprawnego rozwiązania”, a nie łatwego „dołączania kompilatora”, z którego ludzie mogą nadal mieć ochotę korzystać.
Lee Gunn,
1
Mam swój punkt @LeeGunn i jest w porządku, jeśli nie dążysz do odpowiedzi :) Ponieważ twój komentarz zmusił mnie do przemyślenia i poprawiłem odpowiedź, przenosząc tę ​​opcję w ostateczności.
Shashank Agrawal
5

W przypadku Angulara: zatrzymanie terminala i ponowne jego obsłużenie ng serverozwiązało problem.

M Fuat NUROĞLU
źródło
Proszę pana, jesteś legendą, nie masz pojęcia, ile czasu straciłem i mogłem to zrobić. Dziękuję Ci!
Ruben Szekér
Dziękuję, to dla mnie przyjemność :)
M Fuat NUROĞLU
2

Spróbuj ng serve --aot, pomogło mi to naprawić problem, to znaczy, jeśli chcesz uruchomić z aot, który jest zalecany, ponieważ będzie podobny do kompilacji produkcyjnej i pomoże szybciej wykryć błędy.

Mam nadzieję że to pomoże.

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

Tony
źródło
Tak, jestem świadomy @Tony, ale martwię się, że ten błąd nie pojawił się w normalnej aplikacji Angular po aktualizacji do 9. Wystąpił tylko w aplikacji Ionic. Może występować problem z konfiguracją.
Shashank Agrawal
1

Ponieważ aktualizacja jonowa nie jest wystarczająco szybka, możesz spróbować: npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -Spracuj dla mnie.

aktualizacja 2020/02/18 => możemy npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -Steraz uruchomić, aby uzyskać najnowszą stabilną wersję

Trần Quang Hiệp
źródło
Czy to pytanie czy próbujesz na coś odpowiedzieć?
Shashank Agrawal
No cóż, aktualizacja moich natywnych @ ionic do najnowszych stabilnych wersji faktycznie działała dla mnie. Wówczas nie są potrzebne żadne inne wymienione tutaj obejścia.
FelschR
0

trzeba również zaktualizować jonową, będzie działać. W przypadku wersji kątowej, gdy aktualizuje wersję, sama aktualizuje wszystkie zależne. Ale w jonowej trzeba zaktualizować ręcznie.

"@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
źródło
0

Uruchamianie npm updaterozwiązało problem dla mnie.

HaniBhat
źródło
Tak, to również zadziała oczywiście, ponieważ npm updatedosłownie zaktualizuje każdą i każdą zależność i nie będziesz miał pojęcia, że ​​to, co jest zaktualizowane i co nie. Może to również prowadzić do innych błędów.
Shashank Agrawal