कोणीय: IE11 का समर्थन कैसे करें

इस लेख में मैं आपको एंगुलर के साथ इंटरनेट एक्सप्लोरर 11 का समर्थन करने के लिए उठाए गए कदमों को दिखाऊंगा। इसका पहला भाग जल्दी से आपके द्वारा उठाए जाने वाले कदमों को दिखाएगा, और दूसरी छमाही इन चरणों को और अधिक विस्तार से जानने की इच्छा रखने वाले लोगों के लिए और अधिक विस्तार से बताएगी। अंत में मैं कुछ अतिरिक्त युक्तियों को जोड़ूंगा जो एक वास्तविक दुनिया अनुप्रयोग में आ सकते हैं।

Done चलो इसे पूरा किया जाए

चरण 1 - ईएस 5 को लक्षित करना

IE11 केवल सर्वश्रेष्ठ ES5 का समर्थन करता है। इसलिए हमें अपने tsconfig.json को अपडेट करना होगा। यदि पहले से ही नहीं है, तो मिलान के लिए टारगेट प्रॉपर्टी को कम्पाइलर में अपडेट करें:

"संकलनकर्ता": {"लक्ष्य": "es5"}

चरण 2 - broswerlist अपडेट करें

आप ब्राउज़र फ़ाइल खोलें और मिलान करने के लिए IE 9-11 नहीं रेखा को बदलें:

आईई 9-10 IE 11 नहीं

चरण 3 - पॉलीफिल्स

यदि आप या आपका कोई आश्रित ES6 + से सुविधाओं का उपयोग करता है, तो आपको उन लोगों को पॉलीफ़िल करने की आवश्यकता होगी। CoreJS कोणीय स्थापित के साथ शामिल किया गया है, और आपके द्वारा आवश्यक पॉलीफ़िल के बहुमत के लिए उपयोग किया जा सकता है।

अपनी polyfills.ts फ़ाइल खोलें और निम्नलिखित को BROWSER POLYFILLS के नीचे रखें:

यदि आपको एक त्वरित जीत की आवश्यकता है (न कि अनुशंसित):

आयात 'कोर-जेएस';

अन्यथा, यह समझने की कोशिश करें कि आपको क्या पॉलीफ़िल की आवश्यकता है। मैंने पाया कि ये मेरे उपयोग-मामले को कवर करते हैं:

आयात 'कोर-जेएस / एस 6 / प्रतीक'; आयात 'कोर-जेएस / एस 6 / ऑब्जेक्ट'; आयात 'कोर-जेएस / एस 6 / फ़ंक्शन'; आयात 'कोर-जेएस / एस 6 / पार्स-इंट'; आयात 'कोर-जेएस / एस 6 / पार्स-फ्लोट'; आयात 'कोर-जेएस / एस 6 / संख्या'; आयात 'कोर-जेएस / एस 6 / गणित'; आयात 'कोर-जेएस / एस 6 / स्ट्रिंग'; आयात 'core-js / es6 / date'; आयात 'core-js / es6 / regexp'; आयात 'कोर-जेएस / एस 6 / मैप'; आयात 'कोर-जेएस / एस 6 / कमजोर-नक्शा'; आयात 'कोर-जेएस / एस 6 / सेट'; आयात 'core-js / es6 / array'; आयात 'core-js / es7 / array'; // .includes () के लिए

अगला भाग हमें करने की आवश्यकता है, निम्नलिखित पंक्तियों को पॉलीफ़िल्स के शीर्ष के पास खोजें:

/ ** IE10 और IE11 SVG तत्वों पर NgClass समर्थन के लिए निम्नलिखित की आवश्यकता है * / // आयात 'classlist.js'; // रन `एनपीएम इंस्टॉल करें - सेव क्लासीलिस्ट.जेएस`।

जैसा कि निर्देश दिया गया है: npm इंस्टॉल --save classlist.js

और फिर आयात को अनइंस्टॉल करें:

/ ** IE10 और IE11 को SVG तत्वों पर NgClass समर्थन के लिए निम्नलिखित की आवश्यकता होती है * / 'classlist.js' आयात करें; // रन `एनपीएम इंस्टॉल करें - सेव क्लासीलिस्ट.जेएस`।

यदि आप @ कोणीय / प्लेटफ़ॉर्म-ब्राउज़र / एनिमेशन से कोणीय सामग्री या एनिमेशनब्यूलर का उपयोग करते हैं, तो निम्नलिखित पंक्ति खोजें:

// आयात 'वेब-एनिमेशन-जेएस'; // भागो `एनपीएम स्थापित करें - वेब-एनिमेशन-जेएस`।

आयात कथन को रद्द करें और npm इंस्टॉल --save वेब-एनिमेशन-js चलाएं।

आपकी अंतिम पॉलीफ़िल्स .ts फ़ाइल के समान दिखना चाहिए:

पूरा हुआ

और बस! आप जाने के लिए तैयार हैं!

आप आगे के मुद्दों में अच्छी तरह से भाग सकते हैं। इनमें से कुछ पर अब इस लेख के दूसरे भाग में चर्चा की जाएगी।

लेकिन क्यों?

चलो जल्दी से ऊपर जाने के प्रत्येक चरण के माध्यम से जाने से पहले हम अतिरिक्त समस्याओं पर कुछ और सुझावों में जाते हैं जो उत्पन्न हो सकते हैं।

  • लक्ष्य ES5: बहुत सीधा, IE11 केवल ES5 या निम्न का समर्थन करता है। इसलिए, टाइपस्क्रिप्ट को अपने कोड को ES5 संगत कोड में ट्रांसपाइल करना होगा।
  • Browserlist: यह एक दिलचस्प है। हमें यह कहने की आवश्यकता है कि हम IE 11 का समर्थन कर रहे हैं, लेकिन यदि हम IE 9 या 10 का समर्थन नहीं कर रहे हैं, तो यह विशेष रूप से कहना महत्वपूर्ण है कि हम उनका समर्थन नहीं कर रहे हैं, अन्यथा अंतर लोडर में बहुत सारे अपराध शामिल होंगे। _ (धन्यवाद सलाह के लिए @wescopeland_) _
  • पॉलीफ़िल्स - हमारे द्वारा काम किए जाने वाले कुछ पुस्तकालयों, या जो कोड हम लिखते हैं, वह ECMAScript के संस्करणों से निर्भर करता है जो IE11 समर्थन नहीं करता है, इसलिए हमें वर्कअराउंड का उपयोग करके मैन्युअल रूप से ES5 को यह कार्यक्षमता प्रदान करने की आवश्यकता है। यह आधुनिक सुविधाओं का उपयोग करके कोड को सही ढंग से काम करना जारी रखने की अनुमति देगा। (नोट: प्रत्येक पॉलीफ़िल बंडल आकार में वृद्धि करेगा, इसलिए सावधान रहें कि कौन सा पॉलीफ़िल आयात करना है)

Tips कुछ अतिरिक्त टिप्स

ठीक है, इसलिए इस लेख को लिखने की प्रेरणा हमारे ग्रीन-फील्ड ऐप में IE11 का समर्थन करने के लिए सौंपी गई थी। यह विशेष रूप से दर्दनाक था क्योंकि इसके बाद यह IE11 का समर्थन करने के साथ कॉम्पिटिशन के मुद्दों पर प्रकाश डाला गया था:

तीसरे पक्ष के आश्रितों को ES5 का समर्थन करने की आवश्यकता है

यह जल्दी से स्पष्ट हो गया क्योंकि त्रुटियों को आसानी से कंसोल में बाहर थूक दिया गया था। लेकिन इसने एक दिलचस्प समस्या को उजागर किया।

अब अगर हम अपने आवेदन में एक नई निर्भरता या पुस्तकालय को शामिल करना चाहते हैं, तो हमें यह सुनिश्चित करने की आवश्यकता है कि यह ES5 का निर्माण और समर्थन करता है, अन्यथा, हमें इसे छोड़ना होगा। यह संभावित रूप से हमारे विकल्पों को आगे बढ़ा सकता है, जो कभी भी आदर्श नहीं है।

IE11 सीएसएस कस्टम गुण का समर्थन नहीं करता है

यह जल्दी नरक बन गया। IE11 सीएसएस कस्टम गुणों का समर्थन नहीं करता है - जैसे - रंग-रंग: नीला; जिसका मतलब था कि हमारा थीम समाधान रस्सियों पर संभावित था।

बहुत जाँच-पड़ताल के बाद, मैंने पाया कि यह पॉलीफ़िल्ड हो सकता है, हालाँकि, जो पॉलीफ़िल मुझे मिली, वह धीमी थी, बंडल के आकार पर बहुत बड़ा प्रभाव पड़ा और पूरी तरह से सही नहीं था। अन्य मुद्दों के बीच एक पंक्ति में कई कस्टम गुण जैसे गायब सुविधाएँ।

उन्होंने हमारे विशेष उपयोग-मामले और हमारे थीमिंग समाधान के लिए भी काम नहीं किया, जो कस्टम गुण के रनटाइम सेटिंग पर निर्भर थे।

इसका समाधान मेरे पास css-vars-ponyfill से आया, जिसने रनटाइम पर वैश्विक कस्टम गुण स्थापित करने की अनुमति दी। बहुत बढ़िया

IE11 में शैली विशेषता सेट करना

IE11 केवल उसी सीएसएस गुण के साथ DOM तत्व की शैली विशेषता को स्थापित करने की अनुमति देगा जो इसका समर्थन करता है। उदाहरण के लिए, निम्न कार्य करना:

document.body.style = '- छाप-रंग: नीला; फ़ॉन्ट-आकार: 18px ';

IE11 पर निम्नलिखित परिणाम - theprimary-color: blue को खोना।

फ्लेक्सबॉक्स समर्थन से उत्पन्न होने वाली स्टाइलिंग समस्याएं

IE11 फ्लेक्सबॉक्स का समर्थन करता है, लेकिन यह इस बारे में बहुत चुस्त है कि यह कैसे करता है। मैंने देखा कि अगर मैं फ्लेक्स का उपयोग करना चाहता था: 1; एक तत्व को शेष स्थान को भरने की अनुमति देने के लिए, IE11 पर मुझे पूर्ण फ्लेक्स संपत्ति सेट करना था: फ्लेक्स: 1 0 ऑटो; या ऐसा ही कुछ।

IE11 में रनिंग DevTools ज़ोन के साथ टकराव करता है

हां। किसी कारण से, जब आप IE11 पर चलने वाले एनजी सेवा के लिए देव उपकरण खोलते हैं, तो ज़ोन के साथ टकराव का कारण बनता है;

इसे ठीक करने के लिए आपको थोड़ा अतिरिक्त कोड निष्पादित करने के लिए ज़ोन के लिए एक वैश्विक ज़ोन ध्वज जोड़ना होगा।

आप इसे polyfills.ts में करें। Zone.js आयात खोजें और निम्न जोड़ें ताकि यह इस तरह दिखाई दे:

(विंडो किसी भी रूप में) .__ ज़ोन_सेबल_क्रॉस_कोटेक्स्ट_चेक = सच; आयात 'zone.js / जिला / जिला'; // कोणीय सीएलआई के साथ शामिल।

निष्कर्ष

मुझे हफ़्ते में काम करने की कोशिश करने में मज़ा नहीं आया। अब जब मैंने इसका समर्थन किया है; मुझे बहुत अच्छा लगता है मुझे उम्मीद है कि यह लेख भविष्य में किसी को कुछ दर्द से बचा सकता है!

उम्मीद है कि आपने इस लेख को पढ़ने से कुछ हासिल किया है, शायद एक tidbit जिसे आप पहले नहीं जानते थे।

यदि आपके कोई प्रश्न हैं, तो बेझिझक नीचे पूछें या ट्विटर पर मुझसे संपर्क करें: @FerryColum

मूल रूप से https://dev.to पर 10 जनवरी, 2020 को प्रकाशित किया गया।