Ionic 5 diumumkan beberapa jam yang lalu (12 Februari 2020) dan saya meningkatkan salah satu aplikasi produksi kecil saya ke Ionic 5 bersama dengan 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

Tetapi ketika saya melakukannya ionic serve, saya mulai mendapatkan kesalahan di bawah ini:

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)

Saya menemukan beberapa masalah Angular GitHub:

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

Mereka mengatakan untuk memasukkan import '@angular/compiler';dalam main.tsfile tetapi ketika saya mencocokkan salah satu aplikasi Angular 9 saya yang lain (yang saya perbarui baru-baru ini), saya tidak melihat konfigurasi seperti itu di sana.

Apakah Angular 9 tidak kompatibel dengan Ionic 5?

Pembaruan & solusi yang tepat untuk memperbaikinya

Berdasarkan jawaban dari Tran Quang , saya mengunjungi CHANGELOG.md of ionic-nativedan mengetahui bahwa mereka baru saja memperbarui paket mereka untuk dikompilasi dengan Angular 9.

Karenanya Anda perlu memperbarui semua / semua dependensi dari @ionic-native. Untuk ini, lihat semua dependensi dalam package.gsonfile Anda yang dimulai dengan @ionic-native/dan perbarui satu per satu.

Sebagai contoh, ini adalah milik saya package.gson:

Jadi saya harus menjalankan perintah berikut untuk memperbarui semua @ionic-nativedependensi saya :

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

Sama yang harus Anda lakukan untuk @ionic-nativedependensi Anda . Pastikan saja, pembaruan tersebut minimum untuk v5.21.5(karena beberapa rilis lama tidak berfungsi).

Ceria 😀🎉🎊

Jika karena alasan tertentu, Anda tidak dapat memperbarui @ionic-nativedependensi Anda , lihat jawaban asli saya untuk solusi / solusi yang berbeda ⬇️

Jawaban Asli

Bagi saya, solusi berikut berhasil. Tidak yakin apakah mereka sempurna untuk ditambahkan tetapi berharap tim Ionic akan memperbaikinya karena solusi ini tidak diperlukan ketika saya meningkatkan aplikasi Angular saya menjadi Angular 9.

Solusi 1

Matikan AOT dengan mengubah "aot": true ke "aot: falsedalam angular.jsonfile. Saya tidak akan merekomendasikan ini karena ini meningkatkan kinerja aplikasi Angular dan meningkatkan penangkapan kode kesalahan dalam mode pengembangan.

Solusi 2

Jika Anda tidak ingin mengubahnya angular.jsondan hanya ingin memperbaiki masalah ini ionic serve, berikan --aot=falseflag to ngcommand dengan menggunakan --:

ionic serve -- --aot=false

Solusi 3 (opsi buta)

Jika tidak ada solusi di atas yang berfungsi untuk Anda, Anda dapat menjalankan perintah npm updateyang akan memperbarui semua dependensi dari Andapackage.json (artinya, dependensi ionik juga akan diperbarui).

Ini adalah opsi buta karena Anda tidak akan memiliki gagasan tentang dependensi mana yang diperbarui dan perubahan apa yang melanggar pada dependensi yang diperbarui tersebut. Jadi, Anda mungkin akhirnya memperbaiki masalah lain karena ini.

Jadi terserah Anda untuk mengambil risiko ini :) Yah, ini layak dilakukan jika aplikasi Anda tidak sebesar itu atau tidak menggunakan kode apa pun yang dihapus dalam dependensi yang lebih baru.

Solusi 4 (opsi terakhir & terburuk)

Menambahkan import '@angular/compiler';dalam main.tsberkas. Tapi ini mungkin meningkatkan ukuran bundel.

Tambahan

Sementara upgrade Ionic, Anda mungkin menghadapi masalah lain karena salah importdalam polyfills.ts. Jika ya, periksa src / zone-flags.ts hilang dari kompilasi TypeScript setelah memutakhirkan ke Ionic 5

Untuk Angular: Menghentikan terminal dan melayani kembali itu ng servememecahkan masalah bagi saya.

Mencoba ng serve --aot , ini membantu saya memperbaiki masalah, itu jika Anda ingin menjalankan dengan aot yang direkomendasikan karena akan mirip dengan build produksi dan itu akan membantu Anda menangkap kesalahan lebih cepat.

Semoga ini membantu.

Tautan Sudut: https://angular.io/guide/aot-compiler

Karena pembaruan ionik tidak cukup cepat, Anda dapat mencoba: npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -S bekerja untuk saya.

perbarui 2020/02/18 => kita dapat menjalankan npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -Ssekarang untuk mendapatkan versi stabil terbaru

perlu memperbarui ion juga, itu akan berhasil. Untuk sudut ketika memperbarui versi pembaruan itu semua tergantung itu sendiri. Tetapi dalam ion perlu memperbarui secara manual.

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

Menjalankan npm updatememperbaiki masalah untuk saya.