typescript - Ionic 5 với Angular 9 - Biên dịch JIT của Angular thất bại: '@angular/compiler' không được tải

Ionic 5 đã được công bố cách đây vài giờ (12 tháng 2 năm 2020) và tôi đã nâng cấp một trong những ứng dụng sản xuất nhỏ của mình lên Ionic 5 cùng với 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

Nhưng khi tôi chạy ionic serve, tôi bắt đầu nhận được lỗi dưới đây:

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)

Tôi đã gặp một vài vấn đề trên GitHub của Angular:

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

Họ đang nói nên bao gồm import '@angular/compiler'; trong tệp main.ts nhưng khi tôi so sánh với một trong những ứng dụng Angular 9 khác của mình (mà tôi đã cập nhật gần đây), tôi không thấy cấu hình như vậy ở đó.

Angular 9 có không tương thích với Ionic 5 không?

Câu trả lời #1

Giải pháp cập nhật & chính xác để khắc phục điều này

Dựa trên câu trả lời từ Trần Quang, tôi đã đi xem CHANGELOG.md của ionic-native và biết rằng họ gần đây đã cập nhật gói của mình để biên dịch với Angular 9.

Do đó bạn cần cập nhật mọi/tất cả các phụ thuộc của @ionic-native. Để làm điều này, hãy xem tất cả các phụ thuộc trong tệp package.gson của bạn mà bắt đầu bằng @ionic-native/ và cập nhật chúng từng cái một.

Ví dụ, đây là package.gson của tôi:

Vì vậy tôi đã phải chạy các lệnh sau để cập nhật tất cả các phụ thuộc @ionic-native của mình:

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

Tương tự, bạn phải làm như vậy cho các phụ thuộc @ionic-native của mình. Chỉ cần đảm bảo rằng chúng được cập nhật ít nhất lên v5.21.5 (bởi vì một vài phiên bản cũ không hoạt động).

Chúc mừng 😀🎉🎊

Nếu vì lý do nào đó, bạn không thể cập nhật các phụ thuộc @ionic-native của mình, hãy xem câu trả lời gốc của tôi để tìm các giải pháp/lối đi tắt khác ⬇️

Câu trả lời gốc

Đối với tôi, các giải pháp sau đã hiệu quả. Không chắc chúng có hoàn hảo để thêm vào hay không nhưng hy vọng đội ngũ Ionic sẽ sửa vấn đề này vì những giải pháp này không cần thiết khi tôi nâng cấp ứng dụng Angular thuần của mình lên Angular 9.

Giải pháp 1

Tắt AOT bằng cách thay đổi "aot": true thành "aot": false trong tệp angular.json. Tôi không khuyến nghị điều này vì nó cải thiện hiệu suất của ứng dụng Angular và cải thiện việc bắt các mã lỗi trong chế độ phát triển.

Giải pháp 2

Nếu bạn không muốn thay đổi trong angular.json và chỉ muốn sửa lỗi này cho ionic serve, hãy chuyển cờ --aot=false cho lệnh ng bằng cách sử dụng --:

ionic serve -- --aot=false

Giải pháp 3 (tùy chọn mù)

Nếu không có giải pháp nào ở trên hiệu quả với bạn, bạn có thể chạy lệnh npm update để cập nhật tất cả các phụ thuộc từ package.json của bạn (nghĩa là, các phụ thuộc của Ionic cũng sẽ được cập nhật).

Đây là một lựa chọn mù vì bạn sẽ không biết những phụ thuộc nào đã được cập nhật và những thay đổi nào gây lỗi trong các phụ thuộc đã được cập nhật đó. Vì vậy, bạn có thể cuối cùng sẽ phải sửa các vấn đề khác vì điều này.

Vì vậy, tùy bạn có chịu chấp nhận rủi ro này hay không :) Đây là điều đáng làm nếu ứng dụng của bạn không quá lớn hoặc không sử dụng bất kỳ mã nào bị loại bỏ trong các phụ thuộc mới hơn.

Giải pháp 4 (lựa chọn cuối cùng & tệ nhất)

Thêm import ''@angular/compiler'; vào file main.ts. Nhưng điều này có thể làm tăng kích thước gói.

Thêm

Trong khi nâng cấp Ionic, bạn có thể gặp phải một vấn đề khác do import sai trong polyfills.ts. Nếu có, hãy kiểm tra xem src/zone-flags.ts có bị thiếu trong quá trình biên dịch TypeScript sau khi nâng cấp lên Ionic 5 không

Câu trả lời #2

Đối với Angular: Dừng terminal và chạy lại ng serve đã giải quyết vấn đề cho tôi.