👩🏿‍⚕️ 🚠 🍑 कोणीय 9 अब उपलब्ध है

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

यह 3 वर्षों में सबसे बड़े कोणीय अद्यतन में से एक है, और विकास टीम उन अवसरों के बारे में उत्साहित है जो डेवलपर्स को बेहतर अनुप्रयोग बनाने और कोणीय पारिस्थितिकी तंत्र में योगदान करने की अनुमति देते हैं।

संस्करण 9 में अपग्रेड कैसे करें

अधिक जानकारी के लिए update.angular.io पर जाएं । यह सुनिश्चित करने के लिए कि अपडेट सुचारू रूप से चलता है, यह अनुशंसा की जाती है कि आप पहले कोणीय 8 के नवीनतम संस्करण में

अपग्रेड करें। नवीनतम संस्करण 8 में अपग्रेड करना । अपग्रेड

ng update @angular/cli@8 @angular/core@8

ng update @angular/cli @angular/core

किए गए एपीआई सहित इस अपडेट में किए गए मुख्य परिवर्तनों से खुद को परिचित करने के लिए , कोणीय दस्तावेज में 9 कोवर्ल के संस्करण में अपग्रेड करना देखें ।

आइवी लता

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

छोटे बंडल आकार
तेज़ परीक्षण
सर्वश्रेष्ठ डिबगिंग
बेहतर CSS क्लास और स्टाइल बाइंडिंग
बेहतर प्रकार की जाँच
बेहतर त्रुटि संदेश बनाएँ
निर्मित समय में सुधार, डिफ़ॉल्ट रूप से सक्षम AOT
अंतर्राष्ट्रीयकरण में सुधार

आइए कुछ सुधारों पर विस्तार से विचार करें

छोटे बंडल आकार

आइवी कंपाइलर को एंगुलर के उन हिस्सों को हटाने के लिए डिज़ाइन किया गया था जिनका उपयोग ट्रीशेकिंग के साथ नहीं किया जाता है, और कोणीय घटकों के लिए उत्पन्न कोड की मात्रा को कम करने के लिए।

इन सुधारों के लिए धन्यवाद, अनुप्रयोगों को आकार में महत्वपूर्ण कमी मिल सकती है।

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

तेज़ परीक्षण

आइवी टेस्टबेड कार्यान्वयन को भी अधिक कुशल बनाते हुए अपडेट किया गया है।

इससे पहले, TestBed ने प्रत्येक परीक्षण के रन के बीच सभी घटकों को फिर से जोड़ दिया, चाहे वे घटकों में कोई भी बदलाव किए गए हों (उदाहरण के लिए, ओवरराइड्स के माध्यम से)।
आइवी में, टेस्टबेड घटकों को फिर से इकट्ठा नहीं करता है जब तक कि घटक को मैन्युअल रूप से ओवरराइड नहीं किया जाता है, जो अधिकांश परीक्षणों के बीच पुनर्मिलन से बचा जाता है।

इस परिवर्तन के साथ, रूपरेखा के मुख्य परीक्षण लगभग 40% तेजी से गुजरते हैं। यह उम्मीद की जाती है कि उपयोगकर्ता 40-50% के स्तर पर अपने अनुप्रयोगों के परीक्षण की गति में वृद्धि को नोटिस करेंगे।

बेहतर डिबगिंग

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

Angular , .
, applyChanges

Ivy ExpressionChangedAfterItHasBeenCheckederror जैसे डिबग मुद्दों के स्टैक ट्रेस में भी सुधार करता है। इससे पहले, स्टैक बहुत उपयोगी नहीं था:

आइवी के साथ, आप अधिक उपयोगी जानकारी देखते हैं जो आपको संशोधित निर्देश के साथ सीधे टेम्पलेट निर्देश पर जाने की अनुमति देता है।

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

यदि आप चाहें, तो आप इन फ़्रेमवर्क निर्देशों में से किसी पर भी जा सकते हैं ताकि यह पता लगाया जा सके कि फ्रेमवर्क कैसे बनता है या उसके घटकों को अपडेट करता है। ।

बेहतर स्टाइल और सीएसएस कक्षाएं।

आइवी शैलियों को संभालने के लिए एन्हांसमेंट प्रदान करता है। पहले, यदि किसी एप्लिकेशन में प्रतिस्पर्धा शैली परिभाषाएँ होती हैं, तो ये शैलियाँ एक दूसरे को प्रतिस्थापित कर सकती हैं। आइवी के साथ, शैलियों का अनुमान विलय होता है।

निम्नलिखित टेम्पलेट और घटक अंशों पर विचार करें:

<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>

@Component({
  host: {
    style: "color:blue"
  },...
})
...

@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
...

पहले, पिछली बार गणना की गई बाइंडिंग लागू की गई थी, और यह उस समय पर निर्भर कर सकता है जब इन अभिव्यक्तियों में बदलाव किए गए थे। यदि MyColor और MyOtherColor अपरिभाषित थे, तो स्थिर "लाल" शैली को अनदेखा किया जाएगा।

संस्करण 9 में, आप अपनी शैलियों को एक स्पष्ट प्राथमिकता के साथ प्रबंधित कर सकते हैं जो समय से स्वतंत्र है। सबसे विशिष्ट शैली पूर्वता लेते हैं। उदाहरण के लिए, [style.color] के लिए एक बाइंडिंग प्रतिच्छेद बंधन [शैली] को ओवरराइड करती है।

हालाँकि, पिछड़े अनुकूलता कारणों के लिए, हमने [ngStyle] और [ngClass] के व्यवहार को पहले जैसा ही छोड़ दिया। तड़क-भड़क वाले मूल्यों को अद्यतन करते समय, नए मूल्य किसी भी अतिव्यापी तड़क को ओवरराइड करेंगे।

आप टेम्पलेट सिंटैक्स मार्गदर्शिका में शैली पूर्वता नियमों के बारे में अधिक पढ़ सकते हैं ।प्रलेखन में।

स्टाइल रिफैक्टिंग के साइड इफेक्ट के रूप में, अब आप CSS वेरिएबल्स (CSS कस्टम गुण) से भी जुड़ सकते हैं।

<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var( - -main-border-color)">hi</p>
</div>

प्रकार की जाँच में सुधार हुआ

कोणीय संकलक अधिक अनुप्रयोग प्रकारों की जाँच कर सकता है और अधिक कड़े नियम लागू कर सकता है। ये विशेषताएं आपको विकास के शुरुआती चरणों में बग की पहचान करने में मदद करेंगी।

मानक के अतिरिक्त अतिरिक्त प्रकार की जाँच के लिए दो मुख्य झंडों का समर्थन किया जाता है:

fullTemplateTypeCheck - इस झंडे को चालू करने से कंपाइलर को आपके टेम्प्लेट (ngIf, ngFor, tp-template, आदि) में सब कुछ जांचने के लिए कहा जाता है।
hardTemplates - इस ध्वज को सक्रिय करने से टाइप चेकिंग के लिए सबसे कड़े नियम लागू होंगे।

→ टेम्प्लेट में टाइप जाँच के बारे में अधिक

निश्चित त्रुटियों का निर्माण करें

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

संस्करण 8 या व्यू इंजन में, एक विशिष्ट कंपाइलर त्रुटि इस तरह दिखाई देगी:

Ivy के साथ संस्करण 9 में, एक ही त्रुटि इस तरह दिखती है:

निर्मित समय में सुधार, एओटी संकलक डिफ़ॉल्ट रूप से सक्षम है।

आइवी वास्तुकला के लिए धन्यवाद, संकलक के प्रदर्शन में काफी सुधार हुआ है।
टाइपस्क्रिप्ट अनुप्रयोगों के एक सरल संकलन के लिए ओवरहेड के संदर्भ में मापा संकलक प्रदर्शन। हमारी प्रलेखन परियोजना (कोणीय.io) के लिए, ओवरहेड 0.8x से घटकर, Ivy के साथ x, लगभग 40% का सुधार हुआ।

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

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

वर्धित अंतर्राष्ट्रीयकरण (i18n)

अंतर्राष्ट्रीयकरण कोणीय की एक विशेषता थी जहां आप एक बार एक स्थान के लिए एक आवेदन का निर्माण कर सकते हैं और अत्यधिक अनुकूलित और स्थानीयकृत अनुप्रयोग प्राप्त कर सकते हैं। संस्करण 9.0 ने निर्माण प्रक्रिया में बाद में i18n लुकअप को स्थानांतरित करके प्रक्रिया को तेज किया। इस बदलाव ने इसे 10 गुना तेज कर दिया।

→ नए i18n के बारे में अधिक जानकारी :कोणीय/ स्थानीयकरण और नया कोणीय.जॉन।

अधिक विश्वसनीय एनजी अद्यतन

इसे और अधिक विश्वसनीय और सूचनात्मक बनाने के लिए एनजी अपडेट के संचालन में परिवर्तन किए गए हैं।

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

नई सुविधाएँ "प्रदान"

जब आप Angular में @Injectable सर्विस बनाते हैं, तो आपको यह चुनना होगा कि इसे इंजेक्टर में कहां जोड़ा जाए। पिछले "रूट" और "मॉड्यूल" विकल्पों के अलावा, दो अतिरिक्त विकल्प दिखाई दिए।

प्लेटफ़ॉर्म - provideIn: 'प्लेटफ़ॉर्म' संकेत सेवा को एक विशेष सिंगलटन प्लेटफ़ॉर्म इंजेक्टर में उपलब्ध कराता है, जिसे पृष्ठ पर सभी अनुप्रयोगों द्वारा साझा किया जाता है।
कोई भी - प्रत्येक मॉड्यूल के लिए एक अनूठा उदाहरण प्रदान करता है (आलसी मॉड्यूल सहित)

→ उपलब्ध कराई गई के बारे में अधिक

घटक बंधन

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

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

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

यहाँ पहले एक परीक्षण उदाहरण दिया गया है:


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const selectTrigger = fixture.debugElement.query(
    By.css(".mat-select-trigger")
  );
  selectTrigger.triggerEventHandler("click", {});
  fixture.detectChanges();
  await fixture.whenStable();
  const options = document.querySelectorAll(".mat-select-panel mat-option");
  options[1].click(); // Click the second option, "Bug".
  fixture.detectChanges();
  await fixture.whenStable();
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

और वही बात अब:


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

नए घटक

अब आप अपने एप्लिकेशन में YouTube और Google मैप्स की विशेषताओं को शामिल कर सकते हैं।

आप अपने एप्लिकेशन में YouTube खिलाड़ी को नए youtube प्लेयर के साथ एम्बेड कर सकते हैं।
हम गूगल-मैप घटकों को भी पेश करते हैं। ये घटक Google मैप्स की कल्पना करना, मार्करों को प्रदर्शित करना, और अन्तरक्रियाशीलता को जोड़ना आसान बनाते हैं ताकि यह एक नियमित कोणीय घटक की तरह काम करे, जिससे Google मैप्स एपीआई सीखने की आवश्यकता समाप्त हो जाए।

आईडीई और भाषा सेवा में सुधार

विजुअल स्टूडियो मार्केटप्लेस प्लेटफॉर्म पर कोणीय भाषा सेवा विस्तार के लिए महत्वपूर्ण सुधार किए गए हैं। प्रदर्शन और स्थिरता के मुद्दों को हल करने के लिए प्रमुख वास्तुशिल्प मरम्मत के साथ-साथ कई दीर्घकालिक त्रुटियां तय की गई हैं।

टेम्प्लेट सिंटैक्स के लिए टेक्स्टमेट व्याकरण अब आपको एम्बेडेड और बाहरी दोनों टेम्प्लेट में सिंटैक्स को उजागर करने की अनुमति देता है
TemplateUrl और styleUrls के लिए परिभाषा पर जाएं
टूलटिप में टाइप और NgModule जानकारी

टाइपस्क्रिप्ट 3.7 का समर्थन

एंगुलर को टाइपस्क्रिप्ट 3.6 और 3.7 के साथ काम करने के लिए अपडेट किया गया है, जिसमें टाइपस्क्रिप्ट 3.7 में बेहद लोकप्रिय वैकल्पिक बाध्यकारी फ़ंक्शन भी शामिल है। पारिस्थितिकी तंत्र के लिए प्रासंगिक बने रहने के लिए, हमने अन्य निर्भरता के संस्करणों जैसे कि ज़ोन.जेएस और आरएक्सजेएस को भी अपडेट किया।

कोणीय 9 अब उपलब्ध है - आइवी आ गया है