Ionic 5 ได้รับการประกาศเมื่อไม่กี่ชั่วโมงที่ผ่านมา (12 ก.พ. 2020) และฉันได้อัพเกรดแอพโปรดักชั่นเล็ก ๆ ของฉันเป็น Ionic 5 พร้อมกับ 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

แต่เมื่อฉันทำionic serveฉันเริ่มได้รับข้อผิดพลาดการร้อง:

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)

ฉันเจอปัญหาเกี่ยวกับ Angular GitHub ไม่กี่:

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

พวกเขากำลังพูดว่าให้รวมimport '@angular/compiler';ไว้ในmain.tsไฟล์ แต่เมื่อฉันจับคู่หนึ่งในแอปพลิเคชัน Angular 9 อื่น ๆ ของฉัน (ซึ่งฉันเพิ่งอัปเดตล่าสุด) ฉันไม่เห็นการกำหนดค่าดังกล่าวที่นั่น

Angular 9 เข้ากันไม่ได้กับ Ionic 5 หรือไม่

อัปเดตและแก้ไขโซลูชันเพื่อแก้ไขปัญหานี้

ขึ้นอยู่กับคำตอบจากTran QuangผมไปดูCHANGELOG.mdของionic-nativeและมารู้ว่าพวกเขาเพิ่งอัปเดตแพคเกจของพวกเขาไปรวบรวมกับเชิงมุม 9

ดังนั้นคุณจำเป็นต้องปรับปรุงใด ๆ / @ionic-nativeอ้างอิงทั้งหมดของ สำหรับสิ่งนี้ดูการอ้างอิงทั้งหมดในpackage.gsonไฟล์ของคุณซึ่งเริ่มต้นด้วย@ionic-native/และอัปเดตทีละรายการ

ตัวอย่างเช่นนี่คือของฉันpackage.gson:

ดังนั้นฉันต้องเรียกใช้คำสั่งต่อไปนี้เพื่ออัปเดตการ@ionic-nativeอ้างอิงทั้งหมดของฉัน:

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

เช่นเดียวกับที่คุณต้องทำเพื่อการ@ionic-nativeอ้างอิงของคุณ เพียงตรวจสอบให้แน่ใจว่าสิ่งเหล่านั้นได้รับการอัปเดตขั้นต่ำv5.21.5เป็น

ไชโย😀🎉🎊

หากด้วยเหตุผลบางอย่างคุณไม่สามารถอัปเดตการ@ionic-nativeอ้างอิงของคุณได้โปรดดูคำตอบดั้งเดิมของฉันสำหรับวิธีแก้ไขปัญหาต่าง ๆ / วิธีแก้ไข⬇️

คำตอบเดิม

สำหรับฉันแล้วโซลูชันต่อไปนี้ใช้ได้ผล ไม่แน่ใจว่าพวกเขาสมบูรณ์แบบในการเพิ่มหรือไม่ แต่หวังว่าทีม Ionic จะแก้ไขปัญหานี้เนื่องจากไม่จำเป็นต้องใช้โซลูชันเหล่านี้เมื่อฉันอัปเกรดแอปพลิเคชัน Angular ของฉันเป็น Angular 9

โซลูชันที่ 1

ปิด AOT โดยการเปลี่ยน"aot": trueไป"aot: falseในangular.jsonไฟล์ ฉันจะไม่แนะนำสิ่งนี้เนื่องจากจะช่วยเพิ่มประสิทธิภาพการทำงานของแอพเชิงมุมและปรับปรุงการจับรหัสข้อผิดพลาดในโหมดการพัฒนา

โซลูชันที่ 2

หากคุณไม่ต้องการเปลี่ยนangular.jsonและต้องการแก้ไขปัญหานี้ionic serveเพียงผ่าน--aot=falseแฟล็กไปยังngคำสั่งโดยใช้--:

ionic serve -- --aot=false

โซลูชันที่ 3 (ตัวเลือกที่ตาบอด)

หากไม่มีวิธีการแก้ปัญหาด้านบนที่ใช้งานได้สำหรับคุณคุณสามารถเรียกใช้คำสั่งnpm updateซึ่งจะอัปเดตการอ้างอิงทั้งหมดจากตัวคุณเองpackage.json(นั่นหมายถึงการพึ่งพาไอออนิกจะได้รับการอัปเดตด้วย)

นี่เป็นตัวเลือกที่ตาบอดเนื่องจากคุณจะไม่มีความคิดว่าการพึ่งพาใดที่ได้รับการปรับปรุงและสิ่งที่เป็นการเปลี่ยนแปลงที่ไม่แน่นอนในการพึ่งพาที่ได้รับการปรับปรุงเหล่านั้น ดังนั้นคุณอาจสิ้นสุดการแก้ไขปัญหาอื่น ๆ ด้วยเหตุนี้

ดังนั้นจึงขึ้นอยู่กับคุณที่จะรับความเสี่ยงนี้ :) นี่เป็นสิ่งที่ควรทำหากแอปของคุณไม่ใหญ่หรือไม่ใช้รหัสใด ๆ ซึ่งจะถูกลบในการอ้างอิงที่ใหม่กว่า

โซลูชันที่ 4 (ตัวเลือกสุดท้าย & ที่แย่ที่สุด)

เพิ่มimport '@angular/compiler';ในmain.tsไฟล์ แต่นี่อาจเพิ่มขนาดชุดรวม

พิเศษ

ขณะที่การอัพเกรดไอออนิก, คุณอาจเผชิญปัญหาอื่นเพราะความผิดพลาดในimport polyfills.tsหากใช่ให้ตรวจสอบsrc / zone-flag.ts หายไปจากการรวบรวม TypeScript หลังจากอัพเกรดเป็น Ionic 5

สำหรับเชิงมุม: การหยุดเครื่องและให้บริการอีกครั้งเพื่อng serveแก้ไขปัญหาสำหรับฉัน

ลองใช้ng serve --aotมันช่วยฉันแก้ปัญหานั่นคือถ้าคุณต้องการเรียกใช้ด้วย aot ซึ่งแนะนำเพราะมันจะคล้ายกับบิลด์การผลิตและมันจะช่วยให้คุณตรวจจับข้อผิดพลาดได้เร็วขึ้น

หวังว่านี่จะช่วยได้

ลิงก์เชิงมุม: https://angular.io/guide/aot-compiler

เนื่องจากการอัปเดตไอออนิกไม่เร็วพอคุณสามารถลอง: ใช้ npm i @ionic-native/status-bar@beta @ionic-native/splash-screen@beta @ionic-native/core@beta -Sงานได้สำหรับฉัน

อัปเดต 2020/02/18 => เราสามารถเรียกใช้npm i @ionic-native/status-bar @ionic-native/splash-screen @ionic-native/core -Sเพื่อรับเวอร์ชั่นเสถียรล่าสุด

จำเป็นต้องอัพเดทไอออนิกด้วยเช่นกันมันจะทำงาน สำหรับเชิงมุมเมื่อมีการอัปเดต แต่ในแบบอิออนจำเป็นต้องอัพเดทด้วยตนเอง

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

วิ่งnpm updateแก้ไขปัญหาสำหรับฉัน