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?

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:

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.

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

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

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ę

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

Uruchamianie npm updaterozwiązało problem dla mnie.