Ionic 5 dengan Angular 9 - Kompilasi JIT angular gagal: '@ angular / compiler' tidak dimuat


25

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?

Jawaban:


34

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:

masukkan deskripsi gambar di sini

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


4
Solusi 1 bekerja untuk saya
John East

Solusi 1 juga bekerja
Srdan

1
Memutakhirkan @ ionic / asli bekerja untuk saya. Cara terbaik untuk mencoba dan tidak termasuk kompiler jika memungkinkan karena akan meningkatkan ukuran file output Anda.
Lee Gunn

1
@ShashankAgrawal - ah maaf, komentar itu tidak ditujukan kepada Anda - Saya hanya menambahkan bobot pada "solusi yang benar" dan bukan yang mudah "termasuk kompiler" yang mungkin masih tergoda untuk digunakan orang.
Lee Gunn

1
Saya mengerti maksud Anda @LeeGunn dan tidak apa-apa jika Anda tidak mengarahkan jawaban :) Karena komentar Anda membuat saya memikirkan kembali dan saya meningkatkan jawabannya dengan memindahkan opsi itu sebagai pilihan terakhir.
Shashank Agrawal

5

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


Anda Tuan, adalah legenda, Anda tidak tahu berapa banyak waktu saya telah hilang dan saya bisa saja melakukan ini. Terima kasih!
Ruben Szekér

Terima kasih, dengan senang hati :)
M Fuat NUROĞLU

2

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


Ya, saya mengetahui @Tony, tetapi kekhawatiran saya adalah mengapa kesalahan ini tidak muncul di aplikasi Angular normal saat ditingkatkan ke 9. Hanya terjadi di aplikasi Ionic. Mungkin ada masalah konfigurasi.
Shashank Agrawal

1

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


Apakah ini pertanyaan atau Anda mencoba menjawab sesuatu?
Shashank Agrawal

Oh well, memperbarui dependensi @ ionic-asli saya ke versi stabil terbaru benar-benar bekerja untuk saya. Tak satu pun dari solusi lain yang disebutkan di sini diperlukan saat itu.
FelschR

0

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

0

Menjalankan npm updatememperbaiki masalah untuk saya.


Ya, itu juga akan berfungsi tentu saja, karena npm updatesecara harfiah akan memperbarui setiap & setiap ketergantungan dan Anda tidak akan memiliki gagasan tentang apa yang diperbarui & yang lainnya. Itu juga bisa menyebabkan kesalahan lain.
Shashank Agrawal
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.