Ionic 5 đã được công bố vài giờ trước (ngày 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 làm 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 số vấn đề về Angular GitHub:

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

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

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

Cập nhật & giải pháp 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-nativevà đến để biết rằng họ vừa cập nhật phần mềm của họ để biên dịch với góc 9.

Do đó bạn cần cập nhật bất kỳ / tất cả các phụ thuộc của @ionic-native. Đối với điều này, hãy xem tất cả các phụ thuộc trong package.gsontệp của bạn bắt đầu @ionic-native/và cập nhật từng cái một.

Ví dụ: đây là package.gson:

Vì vậy, tôi đã phải chạy các lệnh sau để cập nhật tất cả các @ionic-nativephụ thuộc 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 cho @ionic-nativephụ thuộc của bạn . Chỉ cần đảm bảo, những bản đó được cập nhật tối thiểu thành v5.21.5(vì một vài bản phát hành 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 @ionic-nativephụ thuộc của mình , hãy xem câu trả lời ban đầu của tôi để biết các cách giải quyết / giải pháp khác nhau

Câu trả lời gốc

Đối với tôi, các giải pháp sau đây đã làm việc. Không chắc chúng có hoàn hảo để thêm hay không nhưng hy vọng nhóm Ionic sẽ khắc phục điều 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 đơn giản của mình lên Angular 9.

Giải pháp 1

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

Giải pháp 2

Nếu bạn không muốn thay đổi angular.jsonvà chỉ muốn khắc phục sự cố này ionic serve, hãy chuyển --aot=falsecờ cho nglệnh 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 phù hợp với bạn, bạn có thể chạy một lệnh npm updatesẽ cập nhật theo nghĩa đen tất cả các phụ thuộc từ bạn package.json(có nghĩa là, phụ thuộc Ionic cũng sẽ được cập nhật).

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

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

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

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

Thêm

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

Đối với Angular: Dừng thiết bị đầu cuối và phục vụ lại nó đã ng servegiải quyết vấn đề cho tôi.

Hãy thử ng serve --aot, nó đã giúp tôi khắc phục sự cố, đó là nếu bạn muốn chạy với aot được khuyến nghị vì nó sẽ tương tự như bản dựng sản xuất và nó sẽ giúp bạn bắt lỗi sớm hơn.

Hi vọng điêu nay co ich.

Liên kết góc: https://angular.io/guide/aot-compiler

Vì cập nhật ion không đủ nhanh, bạn có thể thử: npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -Slàm việc cho tôi.

cập nhật 2020/02/18 => chúng tôi có thể chạy npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -Sngay bây giờ để có phiên bản ổn định mới nhất

cần cập nhật ion là tốt, nó sẽ hoạt động. Đối với góc khi phiên bản cập nhật, nó cập nhật tất cả phụ thuộc vào chính nó. Nhưng trong ion cần cập nhật thủ công.

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

Chạy đã npm updatekhắc phục sự cố cho tôi.