कोणीय 9 के साथ आयोनिक 5 - कोणीय JIT संकलन विफल: '@ कोणीय / संकलक' लोड नहीं हुआ

Question

Ionic 5 को कुछ घंटे पहले (12 फरवरी 2020) घोषित किया गया था और मैंने अपने छोटे उत्पादन ऐप में से एक को I9 5 के साथ Angle 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)

मैं कुछ कोणीय GitHub मुद्दों पर आया:

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

वे फ़ाइल import '@angular/compiler';में शामिल करने के लिए कह रहे हैं , main.tsलेकिन जब मैंने अपने एक अन्य कोणीय 9 एप्लिकेशन (जो मैंने हाल ही में अपडेट किया है) से मिलान किया, तो मुझे वहां ऐसे कॉन्फ़िगरेशन नहीं दिखाई देते।

क्या Angular 9 Ionic 5 के साथ संगत नहीं है?

Answer 1

इसे ठीक करने के लिए अद्यतन और सही समाधान

से जवाब के आधार पर लेन-देन क्वांग , मैं देख रहा हूँ के लिए चला गया 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 टीम इसे ठीक कर देगी क्योंकि इन समाधानों की ज़रूरत नहीं थी जब मैंने अपने सादे कोणीय ऐप को कोणीय 9 में अपग्रेड किया था।

समाधान 1

बदलकर AOT बंद कर दें "aot": trueकरने "aot: falseमें angular.jsonफ़ाइल। मैं इसकी अनुशंसा नहीं करूंगा क्योंकि यह कोणीय ऐप के प्रदर्शन में सुधार करता है और विकास मोड में त्रुटि कोड को पकड़ने में सुधार करता है।

समाधान २

यदि आप इसमें परिवर्तन नहीं करना चाहते हैं 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। यदि हाँ, तो Irc 5 को अपग्रेड करने के बाद टाइपस्क्रिप्ट संकलन से src / zone-flag.ts गायब है

Comments

समाधान 1 ने मेरे लिए काम किया

— जॉन ईस्ट

समाधान 1 ने भी काम किया

— श्रीदन

उन्नयन @ आयनिक / देशी मेरे लिए काम किया। यदि संभव हो तो कंपाइलर को शामिल करने का प्रयास करें और न करें क्योंकि यह आपके आउटपुट फ़ाइल आकार को बढ़ाने जा रहा है।

— ली गुन

@ShanhankAgrawal - आह क्षमा करें, टिप्पणी का उद्देश्य आप पर नहीं था - मैं सिर्फ "सही समाधान" के लिए वजन जोड़ रहा हूं और न कि "संकलक" को शामिल करना आसान है जिसे लोग अभी भी उपयोग करने के लिए लुभा सकते हैं।

— ली गुन

मुझे आपकी बात @LeeGunn मिली और यह ठीक है अगर आप उत्तर पर निशाना नहीं लगा रहे थे :) क्योंकि आपकी टिप्पणी ने मुझे पुनर्विचार कर दिया और मैंने अंतिम विकल्प के रूप में उस विकल्प को आगे बढ़ाते हुए उत्तर में सुधार किया।

— शशांक अग्रवाल

Answer 2

कोणीय के लिए: टर्मिनल को रोकना और फिर से सेवा करना ng serveमेरे लिए समस्या का समाधान है।

Comments

आप सर, एक किंवदंती हैं, आपको पता नहीं है कि मैंने कितना समय खो दिया है और मैं बस यही कर सकता हूं। धन्यवाद!

— रूबेन स्ज़ेकर

धन्यवाद, यह मेरी खुशी है :)

— M Fuat NUROULU

Answer 3

कोशिश करो ng serve --aot, इसने मुझे समस्या को ठीक करने में मदद की, यदि आप aot के साथ चलना चाहते हैं जो कि अनुशंसित है क्योंकि यह उत्पादन बिल्ड के समान होगा और यह आपको त्रुटियों को जल्द पकड़ने में मदद करेगा।

उम्मीद है की यह मदद करेगा।

कोणीय लिंक: https://angular.io/guide/aot-compiler

Comments

हां, यह कि मुझे @Tony के बारे में पता है, लेकिन मेरी चिंता यह है कि यह त्रुटि सामान्य कोणीय अनुप्रयोग में दिखाई क्यों नहीं गई जब 9 में अपग्रेड किया गया। यह केवल Ionic ऐप में हुआ। कुछ कॉन्फ़िगरेशन समस्या हो सकती है।

— शशांक अग्रवाल

Answer 4

आयनिक अपडेट के कारण तेजी से पर्याप्त नहीं, आप कोशिश कर सकते हैं: 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अब हम नवीनतम स्थिर संस्करण प्राप्त करने के लिए चला सकते हैं

Comments

यह एक सवाल है या आप कुछ जवाब देने की कोशिश कर रहे हैं?

— शशांक अग्रवाल

ओह ठीक है, नवीनतम स्थिर संस्करणों के लिए मेरे @ आयनिक-देशी निर्भरता को अद्यतन करना वास्तव में मेरे लिए काम करता है। इसके बाद यहां बताए गए किसी भी अन्य वर्कअराउंड की जरूरत नहीं है।

— FelschR

Answer 5

आयनिक को अद्यतन करने की आवश्यकता है, यह काम करेगा। अद्यतन संस्करण के लिए कोणीय के लिए यह सभी निर्भर खुद को अद्यतन करता है। लेकिन ईओण में मैन्युअल रूप से अपडेट करने की आवश्यकता है।

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

Answer 6

रनिंग npm updateने मेरे लिए समस्या तय कर दी।

Comments

हां, यह भी निश्चित रूप से काम करेगा, क्योंकि npm updateशाब्दिक रूप से प्रत्येक और प्रत्येक निर्भरता को अपडेट करेगा और आपको यह पता नहीं चलेगा कि क्या अपडेट किया गया है और क्या नहीं। इससे अन्य त्रुटियां भी हो सकती हैं।

— शशांक अग्रवाल