क्या नया है कोणीय 8 संस्करण में

तो कोणीय 8 बाहर आया, इसमें एक आइवी पूर्वावलोकन, सेवा श्रमिकों के लिए समर्थन, अंतर लोडिंग और कुछ अन्य परिष्करण स्पर्श शामिल हैं। Manfred Steyer नवीनतम रिलीज़ में सबसे महत्वपूर्ण परिवर्तनों की व्याख्या करता है।

जैसा कि योजना बनाई गई थी, इसमें कोई आश्चर्य नहीं था: फ्रेमवर्क और सीएलआई को अपडेट करना एनजी अपडेट का उपयोग करके किया जा सकता है, और नई विशेषताएं आदर्श वाक्य "क्रांति के बजाय विकास" के लिए एक अच्छा अतिरिक्त है।

इस लेख में, लेखक कोणीय 8 और कोणीय CLI 8 की सबसे महत्वपूर्ण नई विशेषताओं के बारे में बात करता है। लेख में उपयोग किए गए उदाहरण GitHub पर पाए जा सकते हैं।

कटौती के तहत:

• पहले आइवी देखें
• वेब कार्यकर्ता
• विभेदक लोडिंग
• आलसी लोडिंग मॉड्यूल
• ViewChild और ContentChild में महत्वपूर्ण परिवर्तन
• नई सुविधाएँ ngUpgrad

पहले आइवी देखें

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

चूंकि कोणीय के कई आधार भागों को बदल दिया गया है, इसलिए कोणीय टीम ने पिछले संस्करणों के साथ संगतता पर विशेष ध्यान दिया है: आइवी को अपग्रेड करने के बाद, मौजूदा अनुप्रयोगों को पहले की तरह ही काम करना चाहिए। सबसे अच्छा, आपको बहुत छोटे बंडल मिलेंगे। यह उदासीन नहीं है, क्योंकि Google पर 600 से अधिक एप्लिकेशन आधिकारिक रूप से एंगुलर पर आधारित हैं - वास्तविक संख्या बहुत अधिक होने की अफवाह है।

कोणीय 8 के साथ, आइवी का प्रारंभिक संस्करण परीक्षण के लिए उपलब्ध है। इस संस्करण का उद्देश्य त्वरित प्रतिक्रिया प्राप्त करना है। इसलिए, कोणीय टीम इस समय उत्पादों में आइवी का उपयोग नहीं करने की सलाह देती है, लेकिन क्लासिक व्यू इंजन (छवि 1) का उपयोग जारी रखती है।


अंतर लोड करने के लिए धन्यवाद (जैसा कि नीचे देखा गया है), बंडल आकार अभी अनुकूलित किया जा सकता है।

Google पर Angular टीम के CTO ब्रैड ग्रीन के अनुसार, ngconf 2019 में, Ivy अंतर लोडिंग के साथ संयुक्त रूप से संगतता मोड में पैकेज आकार में सुधार करेगा। इस प्रकार, डेयरडेविल्स पहले से ही भविष्य के आइवी एपीआई का परीक्षण कर सकते हैं। यह मोड, विशेष रूप से, अनुकूलन के लिए बहुत संभावना है। एपीआई अभी भी निजी चिह्नित है। इसकी कक्षाओं और कार्यों को देखते हुए, आप कह सकते हैं: वे एक विशेष प्रतीक functions से शुरू होते हैं।

यदि आप पहले से ही आइवी को आज़माना चाहते हैं, तो आप enable-ivy स्विच के साथ एक नया प्रोजेक्ट बना सकते हैं:

ng new ivy-project --enable-ivy 

यह कुंजी CLI को tsconfig.app.json कॉन्फ़िगरेशन में निम्नलिखित प्रविष्टि को सहेजने के लिए कहती है:

 "angularCompilerOptions": { "enableIvy": true } 

आइवी का उपयोग करके मौजूदा एप्लिकेशन का परीक्षण करने के लिए संस्करण 8 में अपग्रेड करने के बाद इस प्रविष्टि को मैन्युअल रूप से जोड़ा जा सकता है।
डिबग मोड में एप्लिकेशन को चलाने के लिए, एओटी का उपयोग करने की सिफारिश की जाती है:

 ng serve --aot 

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

वेब कार्यकर्ता

जावास्क्रिप्ट परिभाषा द्वारा एकल-पिरोया गया है। इस वजह से, समय-उपभोक्ता के कार्यों, जैसे डेटा को क्वेरी करना, आमतौर पर अतुल्यकालिक रूप से किया जाता है। कहने की जरूरत नहीं है, यह जटिल गणनाओं में मदद नहीं करता है। वे विशेष रूप से व्यापक जावास्क्रिप्ट समाधानों के साथ अधिक सामान्य होते जा रहे हैं, इसलिए हम लगभग सभी वेब ब्राउज़रों पर वेब श्रमिकों का समर्थन करते हैं। ये स्क्रिप्ट हैं जो ब्राउज़र द्वारा एक अलग थ्रेड में लॉन्च की जाती हैं। ब्राउज़र टैब पर स्ट्रीम के साथ संचार संदेशों के माध्यम से किया जाता है।
यद्यपि वेब कर्मचारी एंगुलर से संबंधित नहीं होते हैं, लेकिन निर्माण करते समय उन्हें ध्यान में रखा जाना चाहिए। लक्ष्य प्रत्येक वेब कार्यकर्ता के लिए एक पैकेज प्रदान करना है। यह कार्य नए सीएलआई द्वारा पूरा किया गया है।
एक नई सुविधा को प्रदर्शित करने के लिए, मैं जावास्क्रिप्ट को तथाकथित " एन क्वीनस समस्या " के कार्यान्वयन को दिखाऊंगा। विचार एक शतरंज पर एक रानी को एक पंक्ति में रखने का है, बिना एक दूसरे को धमकी दिए बिना। एक ही पंक्ति, स्तंभ या विकर्ण दूसरी रानी नहीं होनी चाहिए।

एक शतरंज की बिसात पर सभी संभव समाधानों की गणना करने के लिए एल्गोरिथ्म को कम्प्यूटेशनल रूप से जटिल माना जाता है। यद्यपि एक नियमित आठ-पंक्ति और आठ-कॉलम शतरंजबोर्ड के लिए गणना बहुत तेज है, पारंपरिक कंप्यूटर 12 x 12 बोर्ड के साथ सीमा तक पहुंच गए हैं। 27 x 27 बोर्ड के लिए समाधान वर्तमान रिकॉर्ड है। इस कार्य के लिए, रूसी सुपर कंप्यूटर का उपयोग किया गया था।
इस गणना को पृष्ठभूमि में अनुवाद करने के लिए, हमें पहले CLI का उपयोग करके एक वेब कार्यकर्ता बनाना होगा:

 ng generate worker n-queens 

यह निर्देश न केवल कर्मचारी के लिए एक फ़ाइल बनाता है, बल्कि निर्माण प्रक्रिया के लिए आवश्यक कॉन्फ़िगरेशन फ़ाइलों और मौजूदा फ़ाइलों में प्रविष्टियों के लिए भी है। यदि समान फ़ोल्डर में समान .component.ts फ़ाइल एक्सटेंशन के साथ समान नाम वाला एक घटक होता है, तो CLI वेब कार्यकर्ता के साथ बातचीत करने के लिए कोड भी जोड़ेगा।
कार्यकर्ता स्वयं इस कार्यक्रम के लिए श्रोता होते हैं:

 import nQueens from './n-queens'; addEventListener('message', ({ data }) => { const result = nQueens(data.count); postMessage(result, undefined); }); 

घटना को तब निष्पादित किया जाता है जब मुख्य सूत्र कार्यकर्ता को एक संदेश भेजता है। पैरामीटर में मुख्य स्ट्रीम से भेजी गई जानकारी है। इस मामले में, यह गिनती संपत्ति द्वारा सीमित है, जो शतरंज के आकार को निर्धारित करता है। NQueens फ़ंक्शन का मूल्यांकन करने के बाद, जो यहां छोड़ा गया है, EventListener पोस्टमासेज के माध्यम से परिणाम को मुख्य थ्रेड में वापस भेजता है। इस प्रकार, ब्राउज़र एक संदेश घटना आग।
वर्कर क्लास का उपयोग वर्कर स्क्रिप्ट के साथ इंटरैक्ट करने के लिए कंपोनेंट में किया जाता है:

 const count = parseInt(this.count, 10); const worker = new Worker('../logic/n-queens.worker', { type: 'module' // Worker uses EcmaScript modules }); worker.postMessage({count}); worker.addEventListener('message', (event) => { // tslint:disable-next-line: no-console console.debug('worker result', event.data); // Update chessboard this.processResult(event.data); }); 

घटक पोस्टमैसेज के माध्यम से कार्यकर्ता को वांछित आकार के साथ एक संदेश भेजता है और इस तरह वहां गणना शुरू करता है। यह संदेश घटना के माध्यम से परिणाम प्राप्त करता है।
भविष्य में, सीएलआई कार्यकर्ता लिपियों के सही संयोजन का ख्याल रखता है। टाइपस्क्रिप्ट कंपाइलर उन्हें .worker.ts के अंत में पहचानता है, जो कि एनसी जनरेट वर्कर कमांड द्वारा बनाए गए tsconfig.worker.json में पंजीकृत है। यह सुनिश्चित करने के लिए कि मुख्य एप्लिकेशन का निर्माण करते समय सीएलआई इन फ़ाइलों को फिर से प्रभावित नहीं करता है, एनजी उत्पन्न कार्यकर्ता tsconfig.app.json के बहिष्कृत अनुभाग में एक ही फ़ाइल टेम्पलेट रखता है।
पूर्ण कार्यान्वयन लेखक के उदाहरण के साथ परियोजना में है। तुलना के लिए, एन क्वीन्स कार्य का एक उदाहरण मुख्य सूत्र और वेब कार्यकर्ता दोनों में हल किया जा सकता है। जब आप 12 x 12 शतरंज के लिए एक समस्या को हल करने का प्रयास करते हैं, उदाहरण के लिए, आप देखेंगे कि UI पहले मामले में लटका हुआ है, जबकि वेब कार्यकर्ता के साथ पृष्ठभूमि की गणना प्रदर्शन को कम नहीं करेगी।

विभेदक लोडिंग

अब तक, यह पुराने ईएस 5 में अनुप्रयोगों को संकलित करने के लिए प्रथागत रहा है, क्योंकि "हमारे पिताओं के जावास्क्रिप्ट" का यह संस्करण लगभग हर जगह काम करता है। इसका अर्थ है कि IE11 और Google के वेब क्रॉलर दोनों इस कोड को निष्पादित कर सकते हैं।
हालांकि, नया ES 2015 और उसके बाद के संस्करण अधिक कुशल हैं: वे आपको अधिक कॉम्पैक्ट पैकेज बनाने की अनुमति देते हैं और ब्राउज़र उन्हें और अधिक कुशलता से व्याख्या भी कर सकता है। चूंकि यह पहले ईएस 5 में कम से कम आम भाजक के रूप में रोल करने के लिए प्रथागत था, आधुनिक ब्राउज़र, दुर्भाग्य से, भाषा के नए संस्करण का लाभ नहीं उठा सके।
अब यह खत्म हो गया है: संस्करण 8 के साथ शुरू, सीएलआई में एक विशेषता है जिसे अंतर लोडिंग कहा जाता है। विचार पैकेज के दो समूहों को प्रदान करने के लिए है: एक ECMAScript 5 पर आधारित है और पुराने ब्राउज़रों के लिए डिज़ाइन किया गया है, दूसरा ECMAScript के नए संस्करण, जैसे ECMAScript 2015 पर आधारित है, और पहले उल्लेखित लाभों के साथ आधुनिक ब्राउज़र प्रदान करता है।
अंतर लोडिंग को सक्षम करने के लिए आपको बहुत काम करने की आवश्यकता नहीं है: ईसीएमएस्क्रिप्ट के समर्थित संस्करणों के ऊपरी और निचले सीमा को निर्धारित करने के लिए सभी आवश्यक है। ऊपरी सीमा tsconfig.json में इंगित की गई है:

 "target": "es2015" 

निचला बाउंड ब्राउज़र फ़ाइल में परिभाषित किया गया है। इस फ़ाइल में ऐसे ब्राउज़र शामिल हैं, जो कुछ मानदंडों के अनुसार समर्थित होंगे, जैसे कि बाजार हिस्सेदारी, उदाहरण के लिए। उन्हें बचाया जा सकता है, उदाहरण के लिए, ब्राउज़र्स फ़ाइल में, जो सीएलआई परियोजना की जड़ में एक नई परियोजना बनाते समय बनाता है:
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11

इस मामले में, ब्राउज़रों की सूची में IE 9-11 प्रविष्टि के साथ ES 5 ब्राउज़र शामिल हैं। इस प्रकार, CLI इस संस्करण के रूप में निचली सीमा को परिभाषित करता है। जब CLI एनजी बिल्ड कमांड प्राप्त करता है, तो बिल्ड प्रक्रिया दोनों संस्करणों के लिए चलेगी:

इस प्रक्रिया का नुकसान यह है: विधानसभा के लिए आवश्यक समय दोगुना हो जाता है।
ब्राउज़र अब तय कर सकते हैं कि कौन सा संस्करण डाउनलोड करना है। ऐसा करने के लिए, उन्हें index.html add-on में स्क्रिप्ट्स के लिंक मिलते हैं: जो लोग ECMAScript 5 पैकेज की ओर इशारा करते हैं, उन्हें नॉमिनीड का अतिरिक्त प्राप्त होता है। इस प्रकार, ECMAScript समर्थन वाले ब्राउज़र और इसलिए, ECMAScript 2015+ समर्थन इस स्क्रिप्ट को अनदेखा नहीं करेंगे। दूसरी ओर, ECMAScript 2015+ पैकेज CLI द्वारा टाइप = "मॉड्यूल" के साथ कार्यान्वित किए जाते हैं। इस प्रकार, पुराने ब्राउज़र इन लिपियों को अनदेखा कर देंगे:

 <script src="main-es2015.js" type="module"></script> <script src="main-es5.js" nomodule></script> 

एनजी बिल्ड के विपरीत, बाकी सीएलआई कमांड केवल (!) ईएस समर्थन की ऊपरी सीमा का उपयोग करते हैं। हमारे मामले में, यह ईसीएमएस्क्रिप्ट 2015 है। यह ऐसा होता है, जिसमें दक्षता के कारण शामिल हैं: डिबगिंग और परीक्षण के दौरान, डेवलपर्स आमतौर पर दूसरे बिल्ड के इंतजार के बिना, जितनी जल्दी हो सके परिणाम देखना चाहते हैं।

आलसी लोडिंग मॉड्यूल

पहले दिनों से, कोणीय राउटर आलसी लोडिंग का समर्थन करता है। अब तक, यह एक लोड करने योग्य मॉड्यूल की जादुई परिभाषा के साथ हासिल किया गया है:

 { path: 'lazy', loadChildren: () => './lazy/lazy.module#LayzModule' } 

इससे पहले मान # मॉड्यूल कार्यान्वयन फ़ाइल के लिए अग्रणी पथ का वर्णन करता है; मान का अर्थ है कि इसमें निहित वर्ग। यह वर्णन शैली कोणीय 8 में काम करती है, लेकिन ECMAScript गतिशील आयात के संबंध में इसे हटा दिया गया है:

 { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) } 

नए रिकॉर्ड विकल्प में अभी भी फ़ाइल नाम एक जादू मूल्य के रूप में है। हालांकि, चूंकि आयात कई आईडीई द्वारा समर्थित हैं, इसलिए अमान्य मान तुरंत एक त्रुटि लौटाएंगे।

ViewChild और ContentChild में महत्वपूर्ण परिवर्तन

ViewChild और ContentChild के उपयोग में महत्वपूर्ण परिवर्तन हैं, जो दुर्भाग्य से, अतीत में हमेशा अनुमानित रूप से काम नहीं करते थे। यदि पहले के संस्करणों में उनका उपयोग एक घटक द्वारा क्वेरी तत्वों के लिए किया गया था जो संरचनात्मक निर्देश के अंदर नहीं हैं, जैसे कि ngIf या ngFor, तो क्वेरी परिणाम पहले से ngOnInit में उपलब्ध था। अन्यथा, हम उन्हें ngAfterViewInit (या ContentChild के लिए ngAfterContentInit) से पहले एक्सेस नहीं कर सकते। डेटा बाइंडिंग के कारण बाद में DOM में लोड किए गए तत्वों के लिए, प्रोग्राम कोड में ngAfterViewChecked या, तदनुसार, ngAfterContentChecked होना चाहिए।
चूंकि यह व्यवहार भ्रामक था, इसलिए घटक को अब संकेत देना चाहिए कि संकल्प कब होना चाहिए:

 @ViewChild('info', { static: false }) paragraph: ElementRef; 

यदि स्थिर ध्वज सत्य है, तो घटक के आरंभिक होने पर कोणीय तत्व खोजने का प्रयास करेगा। यह केवल तभी काम करता है जब वे संरचनात्मक निर्देश में नहीं होते हैं। स्थिर: गलत का उपयोग करते समय, दृश्य को प्रारंभ या अपडेट करने के बाद रिज़ॉल्यूशन किया जाता है।
एनजी अपडेट स्वचालित रूप से सही मान दर्ज करने का प्रयास करेगा, यदि यह संभव नहीं है, तो यह TODO के साथ एक टिप्पणी जोड़ देगा।
यह परिवर्तन ViewChildren और ContentChildren सज्जाकार के साथ प्रश्नों को प्रभावित नहीं करेगा। उनके पास हमेशा गतिशील व्यवहार था, नए शब्दों में स्थिर के अर्थ में: असत्य।

नई सुविधाएँ ngUpgrad

अब तक, AngularJS 1.X और कोणीय के साथ मिश्रित समस्याओं में से एक समस्या यह थी कि URL के कारण दोनों रूपरेखाओं के राउटरों में प्रतिस्पर्धा होती थी। इससे साइड इफेक्ट की व्याख्या करना मुश्किल हो गया। इससे बचने के लिए, दोनों संस्करणों में एकल URL स्थान सेवा का उपयोग करने की क्षमता जोड़ी गई थी।
ऐसा करने के लिए, कोणीय टीम ने कोणीय स्थान सेवाओं की क्षमताओं का विस्तार किया और इस तरह से कोणीयजेएस में $ स्थान के लिए एक प्रतिस्थापन प्रदान किया।
इस कारण से, URL परिवर्तनों को ट्रैक करने के लिए स्थान सेवा में एक नया onUrlChange तरीका जोड़ा गया है:

 export class AppComponent { constructor(loc: Location, pLoc: PlatformLocation) { loc.onUrlChange((url) => console.debug('url change', url)); console.debug('hostname: ', pLoc.hostname); } } 

प्लेटफ़ॉर्मेशन सेवा URL के विशिष्ट भागों तक अतिरिक्त पहुँच प्रदान करती है। इस पर आधारित $ लोक प्रतिस्थापन को बेहतर एकीकृत फ्रेमवर्क के लिए कैसे उपयोग किया जाता है, इसका विस्तृत विवरण यहां पाया जा सकता है । इसके अलावा, आप अब AngularJS आलसी लोडिंग समाधान पा सकते हैं, जो कि पूर्वोक्त डायनामिक ईसीएमस्क्रिप्ट इंपोर्ट पर आधारित है।

निष्कर्ष

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

पुनश्च: यह मेरा पहला अनुवाद है, इसलिए कृपया टिप्पणियों, सुझावों और त्रुटियों को टिप्पणियों में नोट करें।