🛥️ 👩🏾‍🤝‍👩🏻 🧙🏻 तैयार हो जाओ: कोणीय 8 करीब है 🎅🏻 👨🏿‍🤝‍👨🏼 👰

सामग्री के लेखक, जिसका अनुवाद हम प्रकाशित कर रहे हैं, कोणीय 8 के बारे में बात करने का सुझाव देता है। यहां हम NgConf और Google I / O 2019 की घटनाओं पर उठाए गए कुछ विशेष गर्म विषयों पर चर्चा करेंगे। इसलिए, यदि आप कोणीय में रुचि रखते हैं, लेकिन किसी कारण से रिपोर्ट नहीं देखी है। इन घटनाओं से, हमें विश्वास है कि आप यह जानने के लिए उत्सुक होंगे कि आप कोणीय 8 से क्या उम्मीद कर सकते हैं।

मुख्य बिंदु

मुझे यकीन है कि अब आप कोणीय you की रिलीज़ की प्रतीक्षा कर रहे हैं, आप उन्हीं भावनाओं का अनुभव कर रहे हैं जो मैंने NgConf 2019 के बाद अनुभव किया था। इगोर मिनार की रिपोर्ट ने कई अपेक्षित नवाचारों को छुआ है - औजारों से लेकर अंतर लोडिंग और कई बेहतरीन अद्भुत चीजों तक।

आइए चर्चा करें कि यह सब आपकी परियोजनाओं को कैसे प्रभावित कर सकता है। अर्थात्, हम नए अवसरों पर विचार करेंगे और इस बारे में बात करेंगे कि क्या उनकी उपस्थिति मौजूदा तंत्र को अप्रचलित के रूप में मान्यता प्रदान करेगी या इस तथ्य के साथ कि नया पुराने के साथ असंगत होगा।

नई सुविधाएँ

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

अंतर लोडिंग तकनीक को लागू करते समय, एंगुलर, परियोजना की विधानसभा प्रक्रिया के दौरान, पॉलीफिल्स के लिए एक अलग बंडल बना सकता है। यह browserlist फ़ाइल पर निर्भर करता है। यहाँ यह सामान्य शब्दों में कैसा दिखेगा।

ऊपर परियोजनाओं को पैक करने का एक नया तरीका है ( स्रोत )

इस सुविधा के उपयोग से बंडलों का आकार कम हो जाएगा।

अंतर लोडिंग ( स्रोत ) के माध्यम से बचत

यह कैसे काम करता है?

कोणीय अतिरिक्त पॉलीफ़िल फ़ाइलों को इकट्ठा करेगा और उन्हें नामांकित विशेषताओं का उपयोग करके कोड में एम्बेड किया जाएगा:

 <body> <pp-root></pp-root> <script type="text/javascript" src="runtime.js"></script> <script type="text/javascript" src="es2015-polyfills.js" nomodule></script> <script type="text/javascript" src="polyfills.js"></script> <script type="text/javascript" src="styles.js"></script> <script type="text/javascript" src="vendor.js"></script> <script type="text/javascript" src="main.js"></script> </body>

nomodule विशेषता, बूलियन, स्क्रिप्ट को ES6 मॉड्यूल का समर्थन करने वाले ब्राउज़रों में लोड करने और निष्पादित करने से रोकता है। ऐसे ब्राउजर ऐसी स्क्रिप्ट्स को नजरअंदाज कर देते हैं। पुराने ब्राउज़र उन्हें डाउनलोड और निष्पादित करते हैं।

▍SVG टेम्प्लेट

अब SVG फ़ाइलों को टेम्प्लेट के रूप में उपयोग किया जा सकता है। अब तक, एम्बेडेड या बाहरी HTML का उपयोग टेम्पलेट्स के रूप में किया जा सकता है।

 @Component({ selector: "app-icon", templateUrl: "./icon.component.svg", styleUrls: ["./icon.component.css"] }) export class AppComponent {...}

मैं आइवी प्रयोगात्मक प्रतिपादन इंजन

आइवी इंजन अभी भी एक प्रायोगिक चरण में है। कोणीय 8 की रिहाई के बाद, आप एक नया अनुप्रयोग बनाते समय --enable-ivy ध्वज का उपयोग करके इसका परीक्षण कर सकते हैं। संबंधित कोड नीचे दिखाया गया है। याद रखें कि आइवी अभी तक तैयार नहीं है (यह अभी भी "ऑप्ट-इन पूर्वावलोकन" स्थिति में है), और, जैसा कि इगोर मीनार ने NgConf 2019 में कहा था, नए अनुप्रयोगों को बनाते समय व्यू इंजन का उपयोग करने की सिफारिश की जाती है।

किसी मौजूदा परियोजना में Ivy के उपयोग को सक्षम करने के लिए, आपको angularCompilerOptions में true angularCompilerOptions में angularCompilerOptions enableIvy option पैरामीटर सेट करने की आवश्यकता है:

 "angularCompilerOptions": {"enableIvy": true}

आप एक नया एप्लिकेशन बना सकते हैं जिसमें Ivy का उपयोग किया जाएगा:

 $ ng new my-app --enable-ivy

आइवी निम्नलिखित उपयोगी सुविधाएँ प्रदान करता है, जिनमें से पहले तीन कोणीय 9 में होने की उम्मीद है:

तेजी से संकलन।
टेम्पलेट्स के लिए बेहतर प्रकार की जाँच।
बंडलों के आकार को कम करना। अब , यदि आपने इसे अभी तक नहीं देखा है, तो Google I / O 19 के साथ 4.3 Kb एप्लिकेशन का प्रदर्शन।
पिछड़ी अनुकूलता।
और मेरी पसंदीदा विशेषता टेम्पलेट डीबग करना है। मुझे यकीन है कि, मेरी तरह, कई डेवलपर्स को इसकी आवश्यकता है।

▍सुपोर्ट बाज़ल

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

शायद आप अब सोच रहे हैं कि क्या बाजेल व्यावहारिक उपयोग के लिए तैयार है। इस प्रश्न का संक्षिप्त उत्तर दें - यह अभी तैयार नहीं है। अब वह "ऑप्ट-इन प्रीव्यू" की स्थिति में है। मुझे Google पर एंगुलर टूल डेवलपमेंट टीम का नेतृत्व करने वाले एलेक्स ईगल को उद्धृत करते हैं: “यदि आप पहले भी बाजेल पानी में प्रवेश कर चुके हैं, तो आप यह ध्यान देने में मदद नहीं कर सकते कि बहुत सारे शार्क थे… अब हम पहले ही शार्क को प्रबंधित कर चुके हैं, लेकिन पानी अभी भी हो सकता है ठंडा। "

Bazel पर अभी भी काम किया जा रहा है, इसे संस्करण 9 में @angular/cli में शामिल किए जाने की उम्मीद है।

यहाँ Bazel हमें दे सकते हैं कुछ उपयोगी विशेषताएं हैं:

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

आप मौजूदा परियोजना में Bazel समर्थन को इस प्रकार जोड़ सकते हैं:

 ng add @angular/bazel

आप Bazel का उपयोग करके एक नया एप्लिकेशन बना सकते हैं:

 $ npm install -g @angular/bazel $ ng new my-app --collection=@angular/bazel

▍API बिल्डर्स

कोणीय का नया संस्करण आपको एपीआई बिल्डर्स का उपयोग करने की अनुमति देता है, जिसे वास्तुकार के रूप में भी जाना जाता है। कोणीय बिल्डरों का उपयोग बुनियादी कार्यों को करने के लिए करता है: serve , build , test , lint और e2e । यहाँ angular.json फ़ाइल से कोडांतरकों का उपयोग करने का एक उदाहरण दिया angular.json है:

 ... "projects": { "app-name": {   ...   "architect": {     "build": {       "builder": "@angular-devkit/build-angular:browser",       ...     },     "serve": {       "builder": "@angular-devkit/build-angular:dev-server",       ...     },     "test": {       "builder": "@angular-devkit/build-angular:karma",       ...     },     "lint": {       "builder": "@angular-devkit/build-angular:tslint",       ...     },     "e2e": {       "builder": "@angular-devkit/build-angular:protractor",       ...     }   } } }

अब आप अपने खुद के कलेक्टर बना सकते हैं। मैं उन्हें पुराने दिनों में इस्तेमाल किए जाने वाले गल्प / ग्रंट कमांड के समान देखता हूं।

सामान्य तौर पर, कलेक्टर आदेशों के एक सेट के साथ एक फ़ंक्शन है जो @angular-devkit/architect पैकेज से createBuilder() विधि के लिए दिया जाता है:

 import { createBuilder } from '@angular-devkit/architect'; function customBuild(options, context) { return new Promise((resolve, reject) => {   //   }) } createBuilder(customBuild);

कोणीय निर्मित कलेक्टरों को यहां देखा जा सकता है । यहां उनके बारे में कोणीय ब्लॉग पर बहुत अच्छी चीजें हैं।

आलसी लोडिंग में परिवर्तन

loadChildren:string नए संस्करण में आलसी मॉड्यूल लोडिंग की प्रणाली का एक नया संस्करण भी होगा, जिसकी उपस्थिति इस तथ्य की ओर ले जाती है कि मौजूदा सिंटैक्स loadChildren:string को पदावनत किया जाएगा।

पहले, यह इस तरह दिखता था:

 loadChildren: './lazy/lazy.module#LazyModule';

कोणीय 8 की रिहाई के साथ - इस तरह:

 loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

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

▍Suport API $ स्थान AngularJS

AngularJS का उपयोग करने वालों की सहायता करने और उन्हें Angular पर स्विच करने में मदद करने के लिए कोणीय विकास दल प्रतिबद्ध है। परिणामस्वरूप, angular/common/upgrade पैकेज में सिस्टम में $location सेवा के लिए समर्थन जोड़ा गया है। हम निम्नलिखित विशेषताओं के बारे में बात कर रहे हैं:

$location सेवा से स्थिति प्राप्त करना।
ट्रैकिंग पता बदल जाता है।
पता के घटकों के बारे में समान जानकारी प्राप्त करना जो कि AngularJS ( hostname , protocol , port , search ) में प्राप्त किया जा सकता है।
MockPlatformLocation API का उपयोग करके सेवा का परीक्षण करना।

Ebवब कामगार

कोणीय 8 वेब श्रमिकों के लिए समर्थन जोड़ता है। उनकी मदद से, आप संसाधन-गहन कोड की पृष्ठभूमि निष्पादन को व्यवस्थित कर सकते हैं। नया वेब वर्कर बनाने के लिए, आप निम्न कोणीय कमांड लाइन इंटरफ़ेस कमांड का उपयोग कर सकते हैं:

 ng g webWorker <name>

▍Service कार्यकर्ता

चूंकि हाल ही में प्रगतिशील वेब अनुप्रयोगों की लोकप्रियता में गंभीर वृद्धि हुई है, कई सेवा कार्यकर्ता सुधार किए गए हैं। विशेष रूप से, इन सुधारों में से एक SwRegistrationOptions पैरामीटर के अतिरिक्त था। एक और सुधार एक ही डोमेन पर कई अनुप्रयोगों का समर्थन था।

सेवा के कार्यकर्ताओं के बारे में अधिक पढ़ें

Ments फॉर्म में सुधार

markAllAsTouched पद्धति को markAllAsTouched गया markAllAsTouched , जो आपको touched रूप में एक FormGroup अंदर सभी तत्वों को चिह्नित करने की अनुमति देता है। यह उन मामलों में बहुत उपयोगी है जहां आपको FormGroup के सभी नियंत्रणों की मान्यता को चलाने की आवश्यकता है। इससे पहले, इस तरह से किया गया था:

 validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls).map((controlName) => {   form.get(controlName).markAsTouched({onlySelf: true}); }); }

नए Angular में, आप FormArray को clear करने के लिए clear विधि का उपयोग कर सकते हैं, जो इसमें से सभी तत्वों को हटा देता है। पहले, निम्न निर्माण का उपयोग करना आवश्यक था, लूप के प्रत्येक पुनरावृत्ति में पहले तत्व को हटाते हुए:

 while (formArray.length) { formArray.removeAt(0); }

अब आपको ऐसा नहीं करना होगा अब एकल विधि को कॉल करना पर्याप्त है:

 formArray.clear()

ViewChild और ContentChild निर्देशों का उपयोग करते समय प्रतिक्रिया प्राप्त करने के क्षण को दोहराएं

इस नई सुविधा से तात्पर्य static ध्वज के उपयोग से है, जो आपको अनुरोध को हल करने की अनुमति देता है, जब ViewChild या ContentChild निर्देश द्वारा परिभाषित किया जाता है।

आप असंगत प्रणाली व्यवहार के निम्नलिखित उदाहरणों में आ सकते हैं। कभी-कभी खोज परिणाम ngOnInit जीवनचक्र पद्धति में उपलब्ध होते हैं, और कभी-कभी ngAfterContentInit या ngAfterViewInit कॉल करने से पहले वे वहां नहीं होते हैं। static ध्वज का उपयोग कैसे करें:

 //          @ContentChild('foo', { static: false }) foo!: ElementRef; //          ngOnInit @ViewChild(TemplateRef, { static: true }) foo!: TemplateRef;

यह ध्यान दिया जाना चाहिए कि ये सुविधाएँ ViewChildren और ViewChildren निर्देशों के लिए उपलब्ध नहीं हैं। परिवर्तन का पता लगाने के बाद संबंधित आइटम खोज क्वेरी निष्पादित की जाती हैं।

static: true का उपयोग करते समय static: true सावधान रहना चाहिए क्योंकि इस ध्वज का उपयोग करने से आप गतिशील टेम्पलेट्स (यानी * एनजीआईएफ) से परिणाम प्राप्त नहीं कर पाएंगे। सिस्टम में एक स्कैमैटिक्स नियम जोड़ा गया है, जिससे आप नए सिंटैक्स का उपयोग करने के लिए मौजूदा कोड का अनुवाद कर सकते हैं। इस सिंटैक्स का उपयोग आइवी के साथ किया जाएगा।

→ इस सुविधा के बारे में विवरण यहाँ पाया जा सकता है ।

▍सुपोर्ट टाइपस्क्रिप्ट 3.4.x

कोणीय अब टाइपस्क्रिप्ट 3.4 का उपयोग करता है (कोणीय का सातवां संस्करण टाइपस्क्रिप्ट 3.2.x का उपयोग करता है)। टीएस के नए संस्करण में इतने बड़े बदलाव नहीं हुए हैं। वे संभवतः अप्रिय परिणामों को जन्म नहीं देंगे।

→ टीएस 3.4 के नवाचारों के बारे में विवरण यहां पाया जा सकता है ।

Ment प्रदर्शन में सुधार

वर्तमान परिस्थितियों में, ServerRendererFactory2 प्रत्येक अनुरोध के लिए DomElementSchemaRegistry का एक नया उदाहरण बनाता है, जो संसाधनों के मामले में काफी महंगा है। अब DomElementSchemaRegistry के वैश्विक उदाहरण को साझा करने का आयोजन किया जाएगा।

B फायरबेस होस्टिंग पर कोणीय अनुप्रयोगों की तैनाती

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

 ng run [PROJECT_NAME]:deploy

→ यहाँ आप इस सुविधा के बारे में अधिक जानकारी प्राप्त कर सकते हैं।

आउटडेटेड एपीआई

▍ TesBed.get के साथ काम करते समय किसी भी प्रकार का उपयोग करें

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

पहले इस तरह के डिजाइन का इस्तेमाल किया:

 TestBed.configureTestingModule({ providers: [{ provide: "stringToken", useValue: new Service() }], }); let service = TestBed.get("stringToken"); //  any

अब निम्नलिखित दृष्टिकोण लागू किया जाता है:

 const SERVICE_TOKEN = new InjectionToken<Service>("SERVICE_TOKEN"); TestBed.configureTestingModule({ providers: [{provide: SERVICE_TOKEN, useValue: new Service()}], }); let service = TestBed.get(SERVICE_TOKEN); //  Service

▍Removing कोणीय / प्लेटफ़ॉर्म-ब्राउज़र से DOCUMENT

DOCUMENT @angular/platform-browser पैकेज से हटा दिया DOCUMENT है। यदि आप इस पैकेज से DOCUMENT उपयोग करते हैं, तो आपको इसे @angular/common से आयात करना शुरू करना चाहिए।

▍Uninstall कोणीय / http पैकेज

@angular/http 5 में @angular/http पैकेज को हटा दिया गया था, लेकिन @angular/platform-server पर निर्भर होने के बाद भी उपलब्ध था। अब इस पैकेज को पैकेज की सूची से हटा दिया गया है।

महत्वपूर्ण परिवर्तन

▍ऑटो कोड फिक्स

कुछ लोगों को पता है कि त्रिकोणीय और col HTML तत्वों का उपयोग करते समय कोणीय स्वचालित रूप से त्रुटियों को ठीक करता है।

tr के मामले में tr यदि तत्सम तत्व tbody , tfoot या thead अंदर नहीं था tr सुधार किए गए थे। तत्व में तत्व के स्वत: स्थान में सुधार शामिल थे।

col के मामले में col सुधार को कोड करने के लिए किया गया था जिसमें यह तत्व colgroup टैग के अंदर नहीं है।

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

→ इस पर विवरण यहाँ पाया जा सकता है ।

Ame नाम बदलें कोणीय सामग्री

कोणीय सामग्री परियोजना का नाम बदलकर कोणीय अवयव रखा गया है। पैकेज के नाम नहीं बदले हैं।

परिणाम

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

कोणीय के नए संस्करणों को अपग्रेड करने के लिए आवश्यक समय ( स्रोत )

नतीजतन, हम आशा कर सकते हैं कि एंगुलर 7 से एंगुलर 8 तक संक्रमण में अधिक समय नहीं लगता है और गंभीर प्रयासों की आवश्यकता नहीं होती है।

यहां आप कोणीय के नए संस्करणों के उन्नयन पर चरण-दर-चरण ट्यूटोरियल पा सकते हैं।

लगभग एक महीने पहले, इगोर मिनार ने कहा कि सब कुछ इंगित करता है कि मई के अंत में कोणीय 8.0.0 अच्छी तरह से बाहर आ सकता है। 24 मई को कोणीय 8.0.0-rc.5 जारी किया गया था।

एंगुलर का भविष्य काफी आशावादी दिखता है। बाकी सब कुछ हमारे ऊपर है।

प्रिय पाठकों! आप कोणीय 8 से क्या उम्मीद करते हैं?

तैयार हो जाओ: कोणीय 8 करीब है