कोणीय 6 और आइवी रेंडरिंग इंजन

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

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

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

ट्री-शेकेबल प्रदाता

अब प्रदाता द्वारा सीधे @Injectable() डेकोरेटर में नया पंजीकरण करने का एक नया, अनुशंसित तरीका है, नए दिए providedIn विशेषता का उपयोग करके। यह आपके आवेदन में किसी भी मॉड्यूल के मूल्य के रूप में 'root' लेता है। 'root' का उपयोग करते समय 'root' कार्यान्वित वस्तु को एक कुंवारे के रूप में आवेदन में पंजीकृत किया जाएगा, और आपको इसे रूट मॉड्यूल में प्रदाताओं से जोड़ने की आवश्यकता नहीं होगी। इसी प्रकार, जब providedIn: UsersModule का उपयोग providedIn: UsersModule कार्यान्वित वस्तु को UsersModule प्रदाता के रूप में पंजीकृत किया जाता है, और मॉड्यूल प्रदाताओं में नहीं जोड़ा जाता है।

 @Injectable({ providedIn: 'root' }) export class UserService { } 

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

अनुप्रयोगों में ऐसी स्थिति अक्सर होने की संभावना नहीं है (यदि आप एक सेवा लिखते हैं, तो इसका उपयोग करें), लेकिन तृतीय-पक्ष मॉड्यूल कभी-कभी ऐसी सेवाएं प्रदान करते हैं जिनकी हमें आवश्यकता नहीं है - परिणामस्वरूप, हमारे पास बेकार जावास्क्रिप्ट का एक पूरा गुच्छा है।

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

एक ही नस में, आप अब एक InjectionToken घोषणा कर सकते हैं, इसे सीधे दिए गए पंजीकरण के साथ पंजीकृत कर सकते हैं providedIn और यहां एक factory जोड़ सकते हैं:

 export const baseUrl = new InjectionToken<string>('baseUrl', { providedIn: 'root', factory: () => 'http://localhost:8080/' }); 

कृपया ध्यान दें: यह इकाई परीक्षण को भी सरल करता है। इस तरह के परीक्षण के प्रयोजनों के लिए, उनका उपयोग परीक्षण मॉड्यूल के प्रदाताओं के साथ सेवा को पंजीकृत करने के लिए किया जाता है। यहां हमने पहले क्या किया था:

 beforeEach(() => TestBed.configureTestingModule({ providers: [UserService] })); 

अब, यदि UserService providedIn: 'root' करता है providedIn: 'root' :

 beforeEach(() => TestBed.configureTestingModule({})); 

बस चिंता न करें: प्रोवाइड के साथ पंजीकृत सभी सेवाओं को परीक्षण में लोड नहीं किया जाता है, लेकिन आलसी त्वरित रूप से, केवल उन मामलों में होता है जब उन्हें वास्तव में जरूरत होती है।

Rxjs 6

कोणीय 6 अब आंतरिक रूप से RxJS 6 का उपयोग करता है, इसलिए आपको इसे ध्यान में रखते हुए एप्लिकेशन को अपडेट करना होगा।

और ... RxJS 6 आयात के लिए दृष्टिकोण बदल रहा है!

RxJS 5 में, आप लिख सकते हैं:

 import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/map'; const squares$: Observable<number> = Observable.of(1, 2) .map(n => n * n); 

RxJS 5.5 में, पाइप करने योग्य बयान दिखाई दिए:

 import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; import { map } from 'rxjs/operators'; const squares$: Observable<number> = of(1, 2).pipe( map(n => n * n) ); 

और RxJS 6.0 में, आयात बदल गए हैं:

 import { Observable, of } from 'rxjs'; import { map } from 'rxjs/operators'; const squares$: Observable<number> = of(1, 2).pipe( map(n => n * n) ); 

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

एंगुलर टीम ने इस विषय पर एक संपूर्ण दस्तावेज लिखा है, और एंगुलर 6.0 पर माइग्रेट करने से पहले इसे पढ़ना पूरी तरह से आवश्यक है।

कृपया ध्यान दें: यहाँ rxjs-tslint नामक एक बहुत ही शांत tslint नियम निर्धारित किया गया है। इसमें केवल 4 नियम हैं, और यदि आप उन्हें प्रोजेक्ट में जोड़ते हैं, तो सिस्टम स्वचालित रूप से आपके सभी आयात और RxJS कोड को माइग्रेट कर देगा, और यह सबसे सरल tslint --fix द्वारा किया जाता है! आखिरकार, यदि आप अभी भी नहीं जानते हैं, तो tslint में एक fix विकल्प है जो स्वचालित रूप से सभी त्रुटियों को ठीक करता है जो इसे पाता है! इसे और भी सरल रूप से उपयोग किया जा सकता है: विश्व स्तर पर rxjs-tslint स्थापित करें और rxjs-5-to-6-migrate -p src/tsconfig.app.json । मैंने हमारी एक परियोजना में rxjs-tslint की कोशिश की और इसने काफी अच्छा काम किया (इसे कम से कम दो बार आयात करने के लिए भी चलाएं)। अधिक जानकारी के लिए इस प्रोजेक्ट की README की जाँच करें: github.com/ReactiveX/rxjs-tslint ।

यदि आप RxJS 6.0 के बारे में अधिक जानने में रुचि रखते हैं, तो मैं बेन लेस की अगली रिपोर्ट एनजी-कॉन्फिडेंस पर सुझाता हूं।

i18n

I18n से जुड़ी सबसे महत्वपूर्ण संभावना प्रत्येक स्थानीय बिंदु के लिए अलग से एप्लिकेशन बनाने के बिना, "रनटाइम पर i18n" बनाने की क्षमता है। यह सुविधा अभी तक उपलब्ध नहीं है (केवल प्रोटोटाइप हैं), और इसके संचालन के लिए आइवी इंजन की आवश्यकता होगी (इसके बारे में अधिक नीचे)।

I18n से संबंधित एक और बदलाव पहले ही हो चुका है और यह उपलब्ध है। मुद्रा चैनल को सबसे कुशल तरीके से अनुकूलित किया गया है: अब यह सभी मुद्राओं को पहले की तरह 2 अंकों तक नहीं, बल्कि वांछित अंकों की संख्या (उदाहरण के लिए, बहरीन दीनार के मामले में 3 से या चिल्हा पेसो के लिए 0) के लिए गोल करता है।

यदि आवश्यक हो, तो यह मान नए i18n getNumberOfCurrencyDigits फ़ंक्शन का उपयोग करके प्रोग्रामेटिक रूप से पुनर्प्राप्त किया जा सकता है।

अन्य सुविधाजनक फ़ॉर्मेटिंग फ़ंक्शंस, जैसे कि formatDate , formatCurrency , formatPercent और formatNumber भी formatPercent formatNumber में दिखाई देते हैं।

यदि आप चैनलों में किए गए समान परिवर्तनों को लागू करना चाहते हैं, लेकिन इसे टाइपस्क्रिप्ट कोड से करें।

एनिमेशन

कोणीय 6.0 में, एनिमेशन पहले से ही पॉलीफ़िल web-animations-js बिना संभव हैं, जब तक कि आप web-animations-js उपयोग नहीं करते हैं। आपका आवेदन कुछ अनमोल बाइट्स जीत सकता है! यदि ब्राउज़र element.animate समर्थन नहीं करता है। element.animate एपीआई, कोणीय 6.0 सीएसएस कीफ्रेम के उपयोग के लिए वापस रोल करता है।

कोणीय तत्व

एंगुलर एलीमेंट्स एक ऐसी परियोजना है जो आपको कोणीय घटकों को वेब घटकों के रूप में लपेटने और उन्हें एक ऐसे अनुप्रयोग में एम्बेड करने की अनुमति देती है जो कोणीय का उपयोग नहीं करता है। सबसे पहले, यह परियोजना केवल "कोणीय लैब" में मौजूद थी (अर्थात, यह अभी भी प्रायोगिक है)। V6 के साथ, यह थोड़ा आगे आता है और आधिकारिक तौर पर फ्रेमवर्क में शामिल है। यह एक बड़ा विषय है जो एक अलग लेख के योग्य है।

एलिमेंटरीफ <टी>

यदि आप अपने टेम्पलेट में एक तत्व लिंक लेना चाहते हैं, तो आप @ViewChild या @ViewChildren उपयोग कर सकते हैं, या यहां तक ​​कि सीधे ElementRef को लागू कर ElementRef । इस मामले में खामी यह है: कोणीय 5.0 या उससे कम में, निर्दिष्ट ElementRef को nativeElement संपत्ति के लिए any प्रकार मिलेगा।

अगर आप चाहें तो कोणीय 6.0 में आप एलिमेंटरिफ़ टाइप टाइप कर सकते हैं:

 @ViewChild('loginInput') loginInput: ElementRef<HTMLInputElement>; ngAfterViewInit() { // nativeElement  `HTMLInputElement` this.loginInput.nativeElement.focus(); } 

क्या अवांछनीय के रूप में मान्यता प्राप्त है और क्या मौलिक रूप से बदल रहा है

आइए बात करते हैं कि प्रवास के दौरान आपको क्या ध्यान रखना चाहिए!

preserveWhitespaces : डिफ़ॉल्ट false

"अपग्रेड के दौरान होने वाली परेशानियों" खंड में, हम ध्यान दें कि अब संरक्षित डिफ़ॉल्ट रूप से false है। यह विकल्प एंगुलर 4.4 में दिखाई दिया, और यदि आप सोच रहे हैं कि एक ही समय में क्या करना है - इस विषय पर यहां एक पूरी पोस्ट है । Spoiler: सब कुछ कर सकता है, या यह आपके टेम्पलेट्स को पूरी तरह से तोड़ सकता है।

ngModel और प्रतिक्रियाशील रूप

पहले, ngModel और formControl साथ एक ही फॉर्म फ़ील्ड प्रदान करना संभव था, लेकिन आज यह अभ्यास अवांछनीय माना जाता है और अब कोणीय 7.0 में समर्थित नहीं होगा।

यहां थोड़ा भ्रम पैदा होता है, और पूरे तंत्र, शायद, जैसा कि आप उम्मीद के ngModel काम नहीं करते थे ( ngModel एक निर्देश था जो आपको बहुत पहले परिचित नहीं था, लेकिन formControl निर्देश का इनपुट / आउटपुट, जो लगभग एक ही प्रदर्शन करता है, लेकिन समान कार्य नहीं)।

तो अब, अगर हम कोड लागू करते हैं:

 <input [(ngModel)]="user.name" [formControl]="nameCtrl"> 

तब हमें एक चेतावनी मिलती है।

आप always ( once ), once (एक बार) या never (कभी नहीं) की चेतावनी प्रदर्शित करने के लिए एप्लिकेशन को कॉन्फ़िगर कर सकते हैं। डिफ़ॉल्ट always ।

 imports: [ ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }); ] 

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

आइवी प्रोजेक्ट: कोणीय में नया (नया) रेंडरिंग इंजन

Soooo ... यह 4 वाँ प्रमुख कोणीय रिलीज़ (2, 4, 5, 6) है, और रेंडरिंग इंजन को तीसरी बार फिर से लिखा जा रहा है!

याद रखें: कोणीय आपके टेम्पलेट्स को समकक्ष टाइपस्क्रिप्ट कोड में संकलित करता है। फिर इस टाइपस्क्रिप्ट को टाइपस्क्रिप्ट के साथ संकलित किया जाता है जिसे आपने जावास्क्रिप्ट में लिखा था, और परिणाम उपयोगकर्ता के निपटान में है। और इससे पहले कि हम पहले से ही एंगुलर में इस रेंडरिंग इंजन का तीसरा संस्करण हैं (पहला एंगुलर 2.0 की शुरुआती रिलीज में था, और दूसरा एंगुलर 4.0 में)।

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

• समय का निर्माण
• डायल आकार

यह सब अभी भी गहरा प्रयोगात्मक है, और नया Ivy रेंडरिंग इंजन एक चेकबॉक्स द्वारा चालू किया गया है, जिसे आपको संकलक विकल्पों ( tsconfig.json फ़ाइल में) में tsconfig.json यदि आप इसे आज़माना चाहते हैं।

 "angularCompilerOptions": { "enableIvy": true } 

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

आइए अधिक विस्तार से चर्चा करें कि आइवी पुराने रेंडरिंग इंजन से कैसे भिन्न है।

पुराने इंजन द्वारा उत्पन्न कोड

आइए एक छोटा उदाहरण देखें: हमारे पास एक PonyComponent घटक है जो PonyModel मॉडल ( name और color मापदंडों के साथ) लेता है और टट्टू की छवि (सूट के आधार पर), साथ ही टट्टू नाम प्रदर्शित करता है।

यह इस तरह दिखता है:

 @Component({ selector: 'ns-pony', template: `<div> <ns-image [src]="getPonyImageUrl()"></ns-image> <div></div> </div>` }) export class PonyComponent { @Input() ponyModel: PonyModel; getPonyImageUrl() { return `images/${this.ponyModel.color}.png`; } } 

कोणीय 4 में पेश किए गए रेंडरिंग इंजन ने प्रत्येक टेम्प्लेट के लिए एक वर्ग बनाया जो कि ngfactory । आमतौर पर वर्ग समाहित होता है (कोड सरलीकृत):

 export function View_PonyComponent_0() { return viewDef(0, [ elementDef(0, 0, null, null, 4, "div"), elementDef(1, 0, null, null, 1, "ns-image", View_ImageComponent_0), directiveDef(2, 49152, null, 0, i2.ImageComponent, { src: [0, "src"] }), elementDef(3, 0, null, null, 1, "div"), elementDef(4, null, ["", ""]) ], function (check, view) { var component = view.component; var currVal_0 = component.getPonyImageUrl(); check(view, 2, 0, currVal_0); }, function (check, view) { var component = view.component; var currVal_1 = component.ponyModel.name; check(view, 4, 0, currVal_1); }); } 

यह पढ़ना मुश्किल है, लेकिन इस कोड के मुख्य भागों को निम्नानुसार वर्णित किया गया है:

• निर्मित DOM की संरचना, जिसमें तत्वों ( figure , img , figcaption ) की परिभाषाएं, उनकी विशेषताओं और पाठ नोड्स की परिभाषाएं शामिल हैं। दृश्य परिभाषा के सरणी में DOM संरचना के प्रत्येक तत्व को अपने स्वयं के सूचकांक द्वारा दर्शाया गया है।
• पता लगाने के कार्य बदलें; उनमें शामिल कोड यह देखने के लिए जांचता है कि क्या टेम्पलेट में उपयोग किए गए भाव पहले के समान मानों के परिणामस्वरूप हैं। यहां, getPonyImageUrl विधि के परिणाम की getPonyImageUrl जाती getPonyImageUrl और, यदि यह बदलता है, तो छवि घटक के लिए इनपुट मान अपडेट किया जाता है। यही टट्टू उपनाम पर लागू होता है: यदि यह बदलता है, तो पाठ नोड जिसमें यह उपनाम शामिल है, अपडेट किया जाएगा।

आइवी जनरेट कोड

अगर हम Angular 6 के साथ काम करते हैं, और enableIvy ध्वज को true सेट किया जाता true , तो एक ही उदाहरण में एक अलग ngfactory नहीं ngfactory जाएगा; जानकारी सीधे घटक के स्थिर क्षेत्र में ही जमा हो जाएगी (सरलीकृत कोड):

 export class PonyComponent { static ngComponentDef = defineComponent({ type: PonyComponent, selector: [['ns-pony']], factory: () => new PonyComponent(), template: (renderFlag, component) { if (renderFlag & RenderFlags.Create) { elementStart(0, 'figure'); elementStart(1, 'ns-image'); elementEnd(); elementStart(2, 'div'); text(3); elementEnd(); elementEnd(); } if (renderFlag & RenderFlags.Update) { property(1, 'src', component.getPonyImageUrl()); text(3, interpolate('', component.ponyModel.name, '')); } }, inputs: { ponyModel: 'ponyModel' }, directives: () => [ImageComponent]; }); // ...   } 

अब सब कुछ इस स्थिर क्षेत्र में समाहित है। template विशेषता में थोड़े अलग ढांचे के साथ परिचित ngfactory के बराबर होता है। template फ़ंक्शन, पहले की तरह, किसी भी परिवर्तन पर लॉन्च किया जाएगा, लेकिन अब इसके दो मोड हैं:

• निर्माण मोड: घटक बस बनाया जा रहा है, इसमें स्थिर डोम नोड्स हैं जिन्हें बनाने की आवश्यकता है
• बाकी फ़ंक्शन को प्रत्येक परिवर्तन (यदि आवश्यक हो, छवि स्रोत और पाठ नोड अपडेट करता है) के साथ निष्पादित किया जाता है।

वह क्या बदलता है?

अब सभी सज्जाकार सीधे अपनी कक्षाओं में निर्मित होते हैं ( @Injectable , @Pipe , @Directive लिए समान), और उन्हें उत्पन्न करने के लिए आपको केवल वर्तमान सज्जाकार के बारे में जानना होगा। इस घटना को एंगुलर टीम ने "स्थानीयता सिद्धांत" कहा है: एक घटक को फिर से जोड़ने के लिए, आपको एप्लिकेशन का पुन: विश्लेषण करने की आवश्यकता नहीं है।

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

हमें कोणीय कोड को भारी बनाने के लिए उपयोग किया जाता है। कभी-कभी यह डरावना नहीं होता है, लेकिन हैलो वर्ल्ड का वज़न कम से कम 37 kb है, जो मिनिमाइजेशन और कम्प्रेशन के बाद बहुत अधिक है जब आइवी कोड उत्पन्न करने के लिए जिम्मेदार होता है, तो गैर-कार्यात्मक कोड बहुत अधिक कुशलता से कट जाता है। अब हैलो वर्ल्ड मिनिमाइज़ेशन के बाद 7.3 केबी तक संपीड़ित है, और संपीड़न के बाद - केवल 2.7 केबी तक, और यह एक बड़ा अंतर है। संपीड़न के बाद TodoMVC आवेदन - केवल 12.2 केबी। यह कोणीय टीम का डेटा है, और अन्य हमारे साथ काम नहीं कर सकते हैं, क्योंकि आइवी यहां वर्णित के रूप में काम करने के लिए, आपको अभी भी इसे मैन्युअल रूप से पैच करने की आवश्यकता है।

अधिक जानकारी के लिए, इस बातचीत को एनजी-कॉन्फिडेंस के साथ देखें।

मौजूदा पुस्तकालयों के साथ संगतता

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

नई सुविधाएँ

आइए विचार करें कि इस प्रदर्शन इंजन के साथ काम करते समय हमारे पास क्या नए अवसर होंगे।

टेम्पलेट्स में निजी गुण

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

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

i18n रनटाइम पर

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

एओटी लाइब्रेरी

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

बेहतर स्टैक ट्रैक

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

NgModule गायब हो NgModule ?

यह अभी भी एक दूर की संभावना है, लेकिन शायद भविष्य में यह बिना NgModules के संभव होगा। इस तरह के परिवर्तनों के पहले लक्षण ट्री-शेकेबल प्रदाता हैं, और यह मान लेना तर्कसंगत है कि आईवी के पास उन सभी आवश्यक बुनियादी ब्लॉक हैं जो धीरे-धीरे NgModules को त्यागने के लिए तैयार हैं (या, कम से कम, उन्हें कम उत्तरदायी बनाते हैं)। सच है, यह सब अभी भी भविष्य में है, हम धैर्य रखेंगे।

इस रिलीज़ में कई नई सुविधाएँ नहीं होंगी, लेकिन भविष्य के लिए आइवी निश्चित रूप से दिलचस्प है। इसके साथ प्रयोग करें - मुझे आश्चर्य है कि आप इसे कैसे पसंद करेंगे!