इस पोस्ट को मूल रूप से प्रकाशित किया गया था मेरा वेबसाइट: https://dsebastien.net
इस लेख में, मैं इस ब्रांड की नई रिलीज़ में उल्लेखनीय सब कुछ (लगभग) पर जाऊँगा। मैं इस बात पर भी प्रकाश डालूंगा कि एंगुलर के आसपास क्या बदल गया है, ठीक वैसे ही जैसे मैंने अपने पिछले लेखों के बारे में किया था कोणीय 11 और कोणीय 10.
यदि आप केवल विहंगम दृश्य की तलाश में हैं, तो देखें आधिकारिक रिलीज की घोषणा. यहां, मैं रिलीज नोट्स में बहुत गहराई से खुदाई करूंगा।
आइवी लीग में शामिल हों…
एंगुलर टीम काम कर रही है आइवी लता (नया संकलन और प्रतिपादन पाइपलाइन) 2018 के बाद से। इसे अंत में एंगुलर 8 के साथ जारी किया गया था। एंगुलर 9 के बाद से, आइवी नई परियोजनाओं के लिए डिफ़ॉल्ट रहा है, और पारिस्थितिकी तंत्र धीरे-धीरे इसमें स्थानांतरित हो रहा है। कोणीय 12 के साथ, पुराना व्यू इंजन अब आधिकारिक रूप से पदावनत कर दिया गया है. इसे भविष्य की प्रमुख रिलीज़ में हटा दिया जाएगा। साथ ही, व्यू इंजन का उपयोग करके नए एप्लिकेशन बनाना संभव नहीं होगा। अंत में, आइवी अब नई लाइब्रेरी परियोजनाओं के लिए डिफ़ॉल्ट है।
इस बिंदु पर, पुस्तकालय लेखक अभी भी व्यू इंजन पर भरोसा कर सकते हैं धन्यवाद thanks ngcc
(कोणीय का संगतता संकलक), लेकिन यह वास्तव में उनके लिए मूल्यांकन करने का समय है कि क्या वे अपने पुस्तकालयों को आइवी में स्थानांतरित कर सकते हैं या नहीं। कुछ हफ़्ते पहले, मिंको गेचेव ने प्रकाशित किया था एक लेख इसे विस्तार से समझाने के लिए। इसके अलावा, संबंधित देखें आरएफसी.
यदि आप नहीं जानते हैं, ngcc
एक छोटी सी प्रक्रिया है जो आपके द्वारा एंगुलर प्रोजेक्ट बनाने या निर्भरता स्थापित करने के बाद चलती है। जब आप जैसे संदेश देखते हैं Compiling ... : es2015 as esm2015
, आईटी इस ngcc
अपना काम कर रहा है। क्या ngcc
करता है पुस्तकालयों को संकलित करता है जो व्यू इंजन पर भरोसा करते हैं ताकि आइवी उनका उपभोग कर सके।
मेरी तरह, आपने शायद गौर किया होगा कि ngcc
निष्पादित करने में बहुत समय लगता है, और इसका डेवलपर अनुभव पर बहुत नकारात्मक प्रभाव पड़ता है। यही कारण है कि कोणीय पारिस्थितिकी तंत्र के लिए जल्द से जल्द आइवी में माइग्रेट करना महत्वपूर्ण है। दूसरा, जब तक अधिकांश पारिस्थितिकी तंत्र आगे नहीं बढ़ जाता है, तब तक कोणीय टीम को व्यू इंजन को इधर-उधर रखना होगा, जो कई कारणों से समस्याग्रस्त है। अंतिम लेकिन कम से कम, दृश्य इंजन पर निर्भर पुस्तकालय आइवी वाले पर निर्भर नहीं हो सकते।
लाइब्रेरी लेखक शायद आइवी में बहुत तेजी से माइग्रेट नहीं कर सकते हैं, लेकिन उन्हें स्पष्ट रूप से अनिच्छुक उपयोगकर्ताओं को अपग्रेड करने के लिए प्रेरित करना चाहिए। वैसे भी, आगे का रास्ता सभी चीजों को जल्द से जल्द आइवी में माइग्रेट करना है
Ivy . के बारे में एक बेहतरीन लेख है वहॉ पर.
अलविदा चांदा
अप्रैल में, एंगुलर टीम ने के समर्थन को समाप्त करने की योजना की घोषणा की है चांदा 2022 के अंत में
कोणीय 12 के अनुसार, प्रोट्रैक्टर को नई परियोजनाओं में डिफ़ॉल्ट रूप से शामिल नहीं किया जाएगा। इसके बजाय, एंगुलर सीएलआई अन्य समाधानों का उपयोग करने के विकल्प प्रदान करेगा जैसे सरू, वेबड्राइवरआईओया, टेस्ट कैफे। इसका मतलब यह है कि ng e2e
भविष्य में भी कमांड का समर्थन जारी रहना चाहिए।
में समझाया घोषणा, 2013 में वापस जब प्रोट्रैक्टर बनाया गया था, वेबड्राइवर नहीं था एक मानक, और एंड-टू-एंड (e2e) परीक्षणों को लिखना कठिन था, और बनाए रखने के लिए एक दुःस्वप्न था। प्रोटेक्टर लपेटकर एक अभिनव समाधान लाया सेलेनियम-वेबड्राइवर, और निष्पादन प्रवाह को नियंत्रित करने का एक तरीका प्रदान किया।
बेशक, तब से बहुत सी चीजें विकसित हुई हैं। अब हमारे पास WebDriver
एपीआई, async
और await
(यहां तक कि शीर्ष स्तर await
, वाह)। साथ ही, पारिस्थितिकी तंत्र भी विकसित हुआ है। समाधान जैसे सरू, नाटककार, कठपुतली चलानेवाला बहुत (अच्छी तरह से योग्य) लोकप्रियता हासिल की है। उदाहरण के लिए सरू जैसे उपकरण प्रोट्रैक्टर की तुलना में बहुत बेहतर डेवलपर अनुभव प्रदान करते हैं, आधुनिक मानकों का लाभ उठाते हैं, और यहां तक कि क्रॉस-ब्राउज़र परीक्षण (अन्य शक्तिशाली क्षमताओं के बीच) का भी समर्थन करते हैं। वर्तमान वास्तविक e2e परीक्षण उपकरण का एक अन्य लाभ यह है कि वे रूपरेखा-अज्ञेयवादी हैं, जो बहुत मूल्यवान है।
लंबी कहानी छोटी, प्रोटैक्टर को बनाए रखना एंगुलर टीम के लिए ज्यादा मायने नहीं रखता है। विकसित होने वाले प्रोट्रैक्टर को अब बहुत अधिक प्रयास की आवश्यकता होगी और एक टन ब्रेकिंग परिवर्तनों को प्रेरित करेगा। आप आरएफसी में अधिक विवरण पा सकते हैं, यह एक दिलचस्प पठन है।
समयरेखा उन टीमों/परियोजनाओं के लिए महत्वपूर्ण है जिन्होंने प्रोट्रैक्टर के साथ e2e परीक्षण लिखने में बहुत समय और ऊर्जा का निवेश किया है। एंगुलर टीम अभी भी आरएफसी के माध्यम से एकत्रित फीडबैक का मूल्यांकन करने में व्यस्त है, इसलिए हम शायद इस साल के अंत में और जानेंगे।
वैसे भी; सरू को आजमाएं यदि आपने पहले से नहीं किया है, तो आप निराश नहीं होंगे! वैसे, मैं सभी को उपयोग शुरू करने की सलाह देता रहता हूं एनआरएल एनएक्स, एक अद्भुत समाधान जिसमें एंगुलर, रिएक्ट, नेक्स्ट.जेएस, सरू और बहुत कुछ के लिए समर्थन शामिल है
नलिश कोलेसिंग
कोणीय 12 में का उपयोग करने के लिए समर्थन शामिल है nullish कोलेसिंग ऑपरेटर कोणीय टेम्पलेट्स में। और यह कमाल है! टाइपस्क्रिप्ट में उस ऑपरेटर का समर्थन किया गया है संस्करण 3.7 के बाद से.
यदि आपने इस ऑपरेटर के बारे में नहीं सुना है, तो मैं आपको एक त्वरित स्पष्टीकरण देता हूं। विचार कुछ होने की स्थिति में फ़ॉलबैक मान को परिभाषित करने में सक्षम होना है able null
or undefined
। यहां एक उदाहरण है:
If foo
is null
or undefined
, तो x
के लिए सेट किया जाएगा true
(यानी, फ़ॉलबैक मान), और हम इसे अपनी पसंद की किसी भी चीज़ पर सेट कर सकते हैं।
इस कमाल के बिना ??
ऑपरेटर, हमें इसके बजाय इसे लिखना होगा:
let x = foo !== null && foo !== undefined ? foo : true;
अब जब कोणीय भी इसका समर्थन करता है, तो हम अंत में भाव लिख सकते हैं जैसे:
{{ age ?? calculateAge() }}
पुराने और अधिक वर्बोज़ विकल्प के बजाय। साफ!
आप इस बदलाव के बारे में और जान सकते हैं यहाँ उत्पन्न करें.
आप नलिश कोलेसिंग के बारे में अधिक जानकारी प्राप्त कर सकते हैं टाइपस्क्रिप्ट हैंडबुक साथ ही साथ एमडीएन.
टाइपस्क्रिप्ट 4.2 समर्थन
कोणीय 12 के लिए समर्थन का परिचय देता है टाइपस्क्रिप्ट 4.2, जिसका अर्थ है कि अब हम a . का उपयोग कर सकते हैं टन नई अद्भुत भाषा सुविधाओं की। साथ ही, टाइपस्क्रिप्ट 4.0 और 4.1 के लिए समर्थन हटा दिया गया है।
टीएस 4.2 में क्या शामिल है, इसका एक त्वरित विवरण यहां दिया गया है:
स्मार्ट प्रकार उपनाम संरक्षण: अपेक्षित प्रकार कोड संपादकों द्वारा कच्चे प्रकारों के बजाय प्रदर्शित किए जाते हैं जैसा कि पहले हुआ था। आप इसके बारे में और जान सकते हैं यहाँ उत्पन्न करें.
Tuple प्रकार में अग्रणी/मध्य विश्राम तत्व: अब हम टपल के भीतर कहीं भी बाकी तत्वों को शामिल कर सकते हैं (कुछ चेतावनियों के साथ)। यह हम में से उन लोगों के लिए बहुत अच्छा है जो समय-समय पर टुपल्स पर भरोसा करते हैं। इसके बारे में और जानें यहाँ उत्पन्न करें.
अपनी परियोजना संरचना को समझना: टीएस 4.2 में शामिल हैं एक नया झंडा बुलाया --explainFiles
, जो टाइपस्क्रिप्ट को इस बारे में जानकारी आउटपुट करने का निर्देश देता है कि आपके प्रोग्राम में एक दायर क्यों शामिल किया गया था। यह समस्या निवारण के लिए बहुत उपयोगी है।
अनचाही फंक्शन जांच के लिए सुधार: टाइपस्क्रिप्ट अब अधिक मामलों का पता लगा सकता है जहां फ़ंक्शन नहीं बुलाए जा रहे हैं। उदाहरण के लिए लिखते समय foo
के बजाय foo()
. अधिक विवरण और उदाहरण मिल सकते हैं यहाँ उत्पन्न करें.
नष्ट किए गए चर अब स्पष्ट रूप से अप्रयुक्त के रूप में चिह्नित किए जा सकते हैं: let [_first, second] = getValues();
, जो कमाल है; कोई और त्रुटि नहीं जब noUnusedLocals
सक्षम किया गया है!
वास्तव में और भी बहुत कुछ है, जैसे कि सख्त जाँच के लिए in
ऑपरेटर, और कुछ महत्वपूर्ण परिवर्तन जो आपको प्रभावित कर सकते हैं। तो जांचना सुनिश्चित करें रिलीज नोट्स.
वेबपैक 5 सपोर्ट
कोणीय 11 हमें लाया वेबपैक 5 के लिए प्रयोगात्मक समर्थन. कोणीय 12 के साथ, वेबपैक 5 समर्थन अब उत्पादन के लिए तैयार है। w00t!
अगर आपने गौर नहीं किया है वेबपैक ५, आप हैरान होने वाले हैं। वेबपैक 5 को अक्टूबर 2020 में रिलीज़ किया गया था, इसलिए यह अब तक काफी स्थिर है। वेबपैक इस समय पर है 5.37 संस्करण (कुछ दिन पहले जारी किया गया)।
वेबपैक 5 के साथ क्या बदला है, और मैं इसके बारे में बहुत खुश क्यों हूं, इसके बारे में एक संक्षिप्त विवरण यहां दिया गया है
सबसे पहले, जैसा कि आप जानते हैं, वेबपैक है कुंजी कोणीय सीएलआई पहेली का टुकड़ा, और यह बंडल आकार, निर्माण प्रदर्शन आदि के लिए एक बड़ी भूमिका निभाता है।
दूसरा, वेबपैक 5 एक कारण से एक प्रमुख रिलीज है। इसमें कई ब्रेकिंग परिवर्तन शामिल हैं, जो बताता है कि एंगुलर और एक गैज़िलियन उपयोगिताओं/पुस्तकालयों को अपग्रेड करने में कुछ समय क्यों लगा।
रिलीज नोट्स में, वेबपैक टीम ने संकेत दिया कि वेबपैक 5 इस पर केंद्रित है:
- के साथ निर्माण प्रदर्शन में सुधार दृढ़ कैशिंग
- बेहतर एल्गोरिदम और डिफ़ॉल्ट के साथ दीर्घकालिक कैशिंग में सुधार
- बेहतर ट्री शेकिंग और कोड जनरेशन के साथ बंडल आकार में सुधार
- वेब प्लेटफॉर्म के साथ संगतता में सुधार
- आंतरिक संरचनाओं की सफाई
- अब ब्रेकिंग परिवर्तन (हाहा) पेश कर रहे हैं, जिससे वे यथासंभव लंबे समय तक v5 पर बने रहें
वेबपैक 5 की सबसे अच्छी विशेषता इसकी है मॉड्यूल फेडरेशन के लिए समर्थन, जो की सुविधा के लिए आवश्यक नींव प्रदान करता है सूक्ष्म अग्रभागों का निर्माण. यह इस लेख के दायरे से थोड़ा बाहर है, लेकिन एक पल में, मॉड्यूल फ़ेडरेशन विभिन्न बिल्डों के लिए एक विशाल कनेक्टेड मॉड्यूल ग्राफ़ की तरह व्यवहार करना संभव बनाता है, और हमें रिमोट बिल्ड से मॉड्यूल आयात और उपयोग करने की अनुमति देता है। चेक आउट आधिकारिक दस्तावेज अधिक जानने के लिए।
बड़े बदलावों में, वेबपैक 5 ने वह सब कुछ छोड़ दिया है जिसे पहले हटा दिया गया था (जैसे, NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), साथ ही साथ IgnorePlugin
और BannerPlugin
.
साथ ही, Node.js पॉलीफ़िल जो पहले स्वचालित रूप से इंजेक्ट किए गए थे, हटा दिए गए हैं; और यह उस रिलीज़ में सबसे बड़े परिवर्तनों में से एक है। उन पॉलीफ़िल ने शुरू में वेबपैक को ब्राउज़र में Node.js के लिए बनाए गए मॉड्यूल का उपयोग करने की अनुमति दी थी। यह अच्छा था, लेकिन इसका एक बड़ा नकारात्मक पहलू था: बड़े बंडल। इसके अलावा, वे पॉलीफ़िल कम और कम उपयोगी थे, क्योंकि या तो पुस्तकालयों के ब्राउज़र-संगत विकल्प थे या ब्राउज़र समर्थन के साथ विशिष्ट वितरण थे। वेबपैक 5 के रूप में, चूंकि उन पॉलीफ़िल्स को अब स्वचालित रूप से नहीं जोड़ा जाएगा, हम कुछ आश्चर्यों पर ठोकर खा सकते हैं। उदाहरण के लिए ऐसे मामलों में जहां हम ब्राउज़र में Node.js के लिए बनाए गए मॉड्यूल का उपयोग करते हैं, यह महसूस किए बिना कि यह पहले वेबपैक के लिए धन्यवाद काम करता है। आप इसके बारे में और जान सकते हैं यहाँ उत्पन्न करें.
वेबपैक 5 ने लंबी अवधि के कैशिंग के लिए बेहतर समर्थन पेश किया है। उत्पादन मोड में, इसमें अब डिफ़ॉल्ट रूप से नए एल्गोरिदम शामिल हैं:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
जैसा कि मान इंगित करता है, वे एल्गोरिदम विखंडू और मॉड्यूल के लिए नियतात्मक आईडी और निर्यात के लिए नियतात्मक नाम निर्दिष्ट करते हैं।
वेबपैक 5 निर्यात के नेस्टेड गुणों (मैट्रिक्स में आपका स्वागत है) तक पहुंच को ट्रैक करके, नेस्टेड ट्री शेकिंग करने में सक्षम है, जिससे ट्री शेकिंग में और सुधार होना चाहिए। इसके अलावा, यह अब कर सकते हैं मॉड्यूल के निर्यात और आयात के बीच निर्भरता का विश्लेषण करें. इसमें भी सुधार हैं कॉमनजेएस ट्री हिल रहा है. और एक टन है अधिक अनुकूलन.
वेबपैक 5 में डेवलपर अनुभव को बेहतर बनाने के लिए कई बदलाव भी शामिल हैं। उदाहरण के लिए, एक . है नया नामित चंक आईडी एल्गोरिदम जो विकास मोड में डिफ़ॉल्ट रूप से सक्षम है। वह नया एल्गोरिदम मानव-पठनीय नामों को विखंडू देता है। NS target
संपत्ति भी बहुत हो गई है उन्नत.
सच कहूं तो, मेरे पास वेबपैक 5 के साथ सब कुछ नया कवर करने के लिए यहां पर्याप्त जगह नहीं है, वहाँकी केवल रास्ता भी बहुत. तो मैं यहीं रुकता हूँ
यदि आप केवल कोणीय सीएलआई के माध्यम से अप्रत्यक्ष रूप से वेबपैक का उपयोग करते हैं, तो इसमें से अधिकांश आपके लिए "पारदर्शी" होना चाहिए। लेकिन अगर आप a . का उपयोग कर रहे हैं कस्टम वेबपैक बिल्ड अपनी परियोजना में, तो आपको शायद इस पर एक नज़र डालनी चाहिए प्रवास गाइड.
अंत में, यदि आप उत्सुक हैं कि वेबपैक के साथ आगे क्या हो रहा है, तो देखें, 2021 का रोडमैप और निश्चित रूप से नवीनतम रिलीज नोट्स.
IE11 समर्थन बहिष्कृत है
यह जितना दुखद लग सकता है (मैं किससे मजाक कर रहा हूं? ), कोणीय 12 IE11 के लिए समर्थन को हटा रहा है। इंटरनेट एक्सप्लोरर हम में से अधिकांश के लिए मर चुका है, लेकिन दुर्भाग्य से, कई संगठन अभी भी उत्पादन में इसका इस्तेमाल करते हैं। IE 11 समर्थन इस प्रकार Angular 13 द्वारा हटा दिया जाएगा, जिसका अर्थ है कि उन संगठनों को वास्तव में IE से दूर जाना शुरू करना होगा (जो कि वैसे भी एक अच्छी बात है)। ज्यादा बहाने नहीं!
एक बार IE समर्थन समाप्त हो जाने के बाद, कोणीय छोटा, तेज, और इस प्रकार हम सभी के लिए बेहतर होगा। साथ ही, एक बार लीगेसी ब्राउज़रों के साथ पश्चगामी संगतता बनाए रखने का बोझ समाप्त हो जाएगा (IE11 उनमें से अंतिम है!), तो कोणीय आधुनिक एपीआई का लाभ उठाने में सक्षम होगा (जैसे, सीएसएस चर, इंटरसेक्शन ऑब्जर्वर, सीएसएस ग्रिड, प्रॉक्सी, वेब एनिमेशन, तथा अधिक).
मैं वास्तव में IE समर्थन के समाप्त होने की प्रतीक्षा नहीं कर सकता!
डिफ़ॉल्ट रूप से सख्त
हाँ हाँ हाँ . कोणीय 12 के अनुसार, कोणीय की सख्त विधा सीएलआई में डिफ़ॉल्ट रूप से सक्षम है। और ये कमाल है।
जैसा कि आप जानते हैं, मैं टाइपस्क्रिप्ट के सख्त मोड का बहुत बड़ा प्रशंसक हूं, लेकिन एंगुलर के सख्त मोड का भी। यदि आप और जानना चाहते हैं, तो देखें पिछले साल मैंने जो लेख लिखा था और मिंको गेचेव्स परिवर्तन की व्याख्या करने वाला लेख.
डिफ़ॉल्ट रूप से उत्पादन निर्माण
अब तक, चल रहा है ng build
कमांड ने एक विकास बिल्ड बनाया। कोणीय 12 के रूप में, ng build
अब एक उत्पादन निर्माण के लिए डिफ़ॉल्ट होगा।
उम्मीद है, यह कुछ टीमों को उत्पादन वातावरण में विकास बिल्ड बनाने और तैनात करने की गलती करने से बचने में मदद करेगा। हालांकि, मुझे डर है कि ऐसी गलती करने वाली टीमों के पास निपटने के लिए अभी भी अन्य मुद्दे होंगे
इनलाइन शैलियों के लिए सास समर्थन
कोणीय बहुत लंबे समय से Sass का समर्थन करता है, लेकिन अब तक, हम केवल Sass को बाहरी स्टाइलशीट में ही उपयोग कर सकते हैं। कोणीय 12 के साथ, अब इनलाइन घटक शैलियों (यानी, के भीतर) के साथ Sass का उपयोग करना संभव है styles
संपत्ति)।
इसे नया सेट करके सक्षम करने की आवश्यकता है inlineStyleLanguage
संपत्ति के लिए true
in angular.json
.
टेलविंड सपोर्ट
tailwind अब आधिकारिक तौर पर एंगुलर द्वारा समर्थित है। दरअसल, एंगुलर सीएलआई में v11.2 में सपोर्ट पेश किया गया था।
टेलविंड है दुनिया को संभालने में व्यस्त, विशेष रूप से अब जबकि इसमें एक है रेड जेआईटी कंपाइलर, और एंगुलर में इसके लिए अंतर्निहित समर्थन होना अद्भुत है।
पहले, टेलविंड को एंगुलर प्रोजेक्ट में जोड़ना आवश्यक था वेबपैक बिल्ड को अनुकूलित करना. अब और नहीं! अब, Tailwind को जोड़ना उतना ही आसान है जितना कि पैकेज को इंस्टाल करना, बनाना tailwind.config.js
का उपयोग कर फ़ाइल npx tailwindcss init
, और सक्षम करना सुनिश्चित करना टेलविंड का जेआईटी मोड.
एचटीपी सुधार
कोणीय 12 अपने HTTP समर्थन के आसपास कई सुधार पेश करता है।
अनुरोध और इंटरसेप्टर के लिए मेटाडेटा
सबसे पहले, HttpClient
अब अनुरोधों के लिए कस्टम मेटाडेटा को संग्रहीत और पुनर्प्राप्त करने के लिए उपयोग किया जा सकता है। यह HTTP इंटरसेप्टर के लिए विशेष रूप से उपयोगी है। इस क्षमता का उपयोग नए के माध्यम से किया जा सकता है HttpContext
.
पहले, इंटरसेप्टर को संदर्भ प्रदान करना जटिल था, लेकिन अब यह बहुत अधिक सरल होगा। अब, द्वारा प्रदान की गई विभिन्न HTTP विधियां HttpClient
एक नया शामिल करें context: HttpContext
विकल्प, जिसे हम मानचित्र में पास करने के लिए उपयोग कर सकते हैं।
नेतनेल बसाली इस बारे में एक लेख लिखा है, इसलिए अगर आप और जानना चाहते हैं तो इसे देखें.
HttpParams पर सभी संलग्न करें
RSI HttpParams
कक्षा में अब एक नया है appendAll
विधि, जिसका उपयोग मापदंडों के एक सेट को एक साथ आसानी से जोड़ने के लिए किया जा सकता है:
appendAll(params: {[param: string]: string|string[]}): HttpParams
पैरा को अब संख्या और बूलियन के रूप में पारित किया जा सकता है
पहले, संख्याएं और बूलियन सीधे HTTP पैरामीटर के रूप में उपयोग नहीं किए जा सकते थे। हमें उन्हें स्ट्रिंग्स में बदलना था। अब और नहीं!
एचटीपीस्टैटसकोड
एंगुलर ने एक कॉन्स्टेबल एनम के रूप में HTTP स्टेटस कोड के लिए मानव-पठनीय नामों की अपनी सूची पेश की है।
पहले, अगर हम मानव-पठनीय नाम रखना चाहते थे तो हमें अपना समाधान पेश करना पड़ता था। इस नई सुविधा के लिए धन्यवाद, अब हम इसके बजाय उपयोग कर सकते हैं HttpStatusCode
.
उदाहरण के लिए:
if (response.status === HttpStatusCode.Ok) { ...
}
जो लोग बैक-एंड और फ्रंट-एंड दोनों पर टाइपस्क्रिप्ट का उपयोग करते हैं, उनके लिए यह बहुत उपयोगी नहीं है (जैसा कि हम सभी के पास पहले से ही हमारा अपना एब्स्ट्रैक्शन है), लेकिन अगर आपका प्रोजेक्ट केवल फ्रंट-एंड पर टाइपस्क्रिप्ट/एंगुलर का उपयोग करता है, तो यह है एक अच्छा सुधार।
XhrFactory
RSI XhrFactory
कक्षा को एक अलग पैकेज में ले जाया गया है। यह अब exposed द्वारा उजागर किया गया है angular/common
के बजाय angular/common/http
.
ध्यान दें कि अपग्रेड में एक माइग्रेशन शामिल किया गया है, इसलिए यदि आप दौड़ते हैं तो आपको पता भी नहीं चलेगा ng update
राउटर परिवर्तन
एंगुलर 12 में एंगुलर राउटर थोड़ा बदल गया है।
सबसे पहले, routerLinkActiveOptions
निर्देश बढ़ा दिया गया है। अब, यह निर्दिष्ट करना संभव है कि किसी लिंक में CSS वर्ग जोड़ने के लिए हमें URL के विभिन्न भागों के लिए सटीक मिलान की आवश्यकता है या नहीं।
पहले, हमें पूरे URL के लिए केवल एक सटीक मिलान (या नहीं) की आवश्यकता हो सकती थी:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
अब, हम इसके बजाय पथ, क्वेरी पैरामीटर, मैट्रिक्स पैरामीटर और टुकड़ों के लिए बढ़िया मिलान नियम प्रदान कर सकते हैं।
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
समर्थित मान हैं exact
, ignored
और subset
, जिसका उपयोग के लिए किया जा सकता है queryParams
और matrixParams
. रास्तों के लिए, आप या तो पास कर सकते हैं exact
or subset
, तथा exact
or ignored
के लिए fragment
.
ध्यान दें कि isActive
राउटर की विधि भी इन नए विकल्पों को स्वीकार करती है।
टुकड़ा अशक्त है
अब तक, ActivatedRouteSnapshot.fragment
अशक्त नहीं था। यह एंगुलर 12 के साथ बदल गया है। हालांकि बहुत ज्यादा चिंता न करें; ng update
आपको कवर किया गया है
प्रपत्र(फॉर्म्स)
उत्सर्जित घटनाओं पर अधिक नियंत्रण
RSI emitEvent
के विभिन्न तरीकों में विकल्प जोड़ा गया है FormGroup
और FormArray
. इस परिवर्तन के लिए धन्यवाद, अब यह नियंत्रित करना संभव होगा कि अधिक मामलों में घटनाओं को उत्सर्जित करने की आवश्यकता है या नहीं।
उदाहरण के लिए, पहले जब नियंत्रण का उपयोग करके हटा दिया गया था removeControl
उसकि विधि FormGroup
, तो एक घटना हमेशा उत्सर्जित होती थी। इस बदलाव से अब हम ऐसी समस्याओं से बच सकेंगे।
RSI emitEvent
विकल्प को निम्नलिखित विधियों में जोड़ा गया है: FormGroup
:
addControl
removeControl
setControl
और निम्न विधियों के लिए FormArray
:
push
insert
removeAt
setControl
clear
न्यूनतम और अधिकतम सत्यापनकर्ता टेम्पलेट-चालित प्रपत्रों के लिए समर्थन करते हैं
RSI min
और max
कोणीय के सत्यापनकर्ता अब टेम्पलेट-संचालित रूपों के साथ उपयोग किए जा सकते हैं:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
ध्यान दें कि यह एक ब्रेकिंग बदलाव है, क्योंकि उन्हें पहले अनदेखा कर दिया जाएगा।
i18n
इस रिलीज के साथ एंगुलर का i18n सिस्टम बदल गया है।
जैसा कि घोषणा ब्लॉग पोस्ट में बताया गया है, वर्तमान में कई लीगेसी संदेश आईडी प्रारूपों का उपयोग किया जा रहा है। वे नाजुक हैं और व्हाइटस्पेस, स्वरूपण टेम्पलेट्स और आईसीयू अभिव्यक्तियों के कारण समस्याएं प्रकट हो सकती हैं।
कोणीय 12 एक नया विहित संदेश आईडी प्रारूप पेश करता है (यानी, उन सभी पर शासन करने के लिए एक प्रारूप)। यह प्रारूप अधिक लचीला और अधिक सहज है।
यह प्रारूप उन अनुप्रयोगों में अनावश्यक अनुवाद अमान्यता और संबद्ध पुनर्अनुवाद लागत को कम करेगा जहां उदाहरण के लिए व्हाइटस्पेस परिवर्तनों के कारण अनुवाद मेल नहीं खाते हैं।
v11 के बाद से, नई परियोजनाओं को नए संदेश आईडी का उपयोग करने के लिए स्वचालित रूप से कॉन्फ़िगर किया गया है, और अब मौजूदा अनुवादों के साथ मौजूदा परियोजनाओं को स्थानांतरित करने के लिए टूलिंग मौजूद है। यदि आप चिंतित हैं, तो आप इसका उपयोग कर सकते हैं localize-migrate
आपकी संदेश आईडी माइग्रेट करने के लिए टूल:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
आप अधिक जानकारी पा सकते हैं यहाँ उत्पन्न करें.
कार्य में सुधार
इस रिलीज के साथ, कई प्रदर्शन सुधार हुए हैं। सबसे स्पष्ट वेबपैक 5 में अपग्रेड के साथ आता है, लेकिन और भी बहुत कुछ है:
कई अप्रयुक्त विधियों को हटा दिया गया है DomAdapter
. यह अच्छा है क्योंकि इसके तरीके पेड़ को हिलाने योग्य नहीं हैं, और सभी कोणीय अनुप्रयोगों में शामिल किए गए थे, जैसा कि में बताया गया है संबंधित जनसंपर्क.
सुरक्षित संपत्ति पहुंच के लिए कोणीय अब कम कोड उत्पन्न करता है; उदाहरण के लिए टेम्पलेट अभिव्यक्तियों जैसे a?.b
और नव समर्थित नल कोलेसिंग: a ?? b
.
कोणीय संकलक अब पुनर्निर्देशित स्रोत फ़ाइलों की उपस्थिति में भी वृद्धिशील संकलन का समर्थन करता है। पहले, पूर्व संकलन से कार्य का पुन: उपयोग नहीं किया जा सकता था जब टाइपस्क्रिप्ट ने स्रोत फ़ाइलों को डुप्लीकेट किया था। आप इसके बारे में और अधिक पढ़ सकते हैं यहाँ उत्पन्न करें.
कोणीय संकलक अब स्रोत फ़ाइलों के फ़ाइल सिस्टम पथ को कैश करता है। पहले, इसे बार-बार बुलाया जाता था fs.resolve()
, जो समय लेने वाली है।
RSI getDirectives
समारोह में सुधार किया गया है। उस परिवर्तन के साथ-साथ, ng
एक नया शामिल करने के लिए नेमस्पेस का भी विस्तार किया गया है getDirectiveMetadata
उपयोगिता।
और वहाँ है कुछ और.
एनजी एपीआई सुधार
RSI ng
डिबगिंग एपीआई जिसे हम ब्राउज़र से उपयोग कर सकते हैं देव टूल्स को एंगुलर 12 के साथ बेहतर बनाया गया है।
नामक एक नया फ़ंक्शन है getDirectiveMetadata
, जिसका उपयोग घटकों और निर्देशों के बारे में जानकारी प्राप्त करने के लिए किया जा सकता है। मुझे नहीं लगता कि हमें इसकी अक्सर आवश्यकता होगी, लेकिन भविष्य के देव टूलिंग सुधार संभवतः इस पर निर्भर होंगे। आप और जान सकते हैं यहाँ पर.
एक नया प्रोफाइलर फ़ंक्शन कहा जाता है esetProfiler
भी लागू किया गया है, और यह उत्पादन मोड में भी उपलब्ध है। उस नए फ़ंक्शन को कई परिदृश्यों में बुलाया जा सकता है। उदाहरण के लिए, इसका उपयोग टेम्प्लेट निर्माण अवधि, टेम्प्लेट अपडेट, जीवनचक्र हुक प्रसंस्करण, आदि का पता लगाने के लिए किया जा सकता है। फिर से, इस एपीआई का आगामी देव टूल द्वारा लाभ उठाया जाएगा, जिससे हमें इस बारे में बहुत अधिक जानकारीपूर्ण जानकारी मिलती है कि हमारे एप्लिकेशन कैसा प्रदर्शन कर रहे हैं। रनटाइम।
इस बिंदु पर यह अभी भी प्रायोगिक है, लेकिन मुझे लगता है कि हम इसके बारे में बाद में और सुनेंगे। मैं यह देखने के लिए उत्सुक हूं कि क्या/कब संतरी जैसे उपकरण हमें उपयोगी प्रदर्शन डैशबोर्ड प्रदान करने के लिए इस तरह की जानकारी एकत्र करने के लिए समर्थन को एकीकृत करेंगे।
एंगुलर 12 के जारी होने के कुछ दिनों बाद, एंगुलर टीम ने की घोषणा गूगल क्रोम के लिए एकदम नए एंगुलर देव टूल्स की उपलब्धता। आप उन्हें डाउनलोड कर सकते हैं यहाँ उत्पन्न करें.
उस बिल्कुल नए ब्राउज़र एक्सटेंशन का उपयोग करके, आप विकास के दौरान अपने कोणीय अनुप्रयोगों का आसानी से निरीक्षण कर सकते हैं। यह समर्थन करता है:
- एप्लिकेशन की संरचना की कल्पना करना (अर्थात, घटक ट्री का निरीक्षण करना)
- घटकों की खोज और संपादन
- प्रोफाइलिंग प्रदर्शन
एम्बेडेड प्रोफाइलर का उपयोग करके, हम परिवर्तन का पता लगाने वाली घटनाओं को रिकॉर्ड कर सकते हैं, और उनका पूर्वावलोकन कर सकते हैं जैसे वे होते हैं। प्रत्येक परिवर्तन का पता लगाने के चक्र के लिए, हम देख सकते हैं कि इसमें कितना समय लगा, किन घटकों ने सबसे लंबा समय लिया, क्या वह चक्र फ्रेम ड्रॉप का कारण बना।
कोणीय के पास पहले अर्ध-आधिकारिक देव उपकरण थे भविष्यवाणी प्रोजेक्ट (जो नए टूल का आधार हैं!), लेकिन वे आइवी के साथ संगत नहीं थे। तो यह एंगुलर समुदाय के लिए बहुत अच्छी खबर है!
और अधिक ...
वहाँ एक टन अधिक इस रिलीज में मामूली बदलाव। यहाँ एक त्वरित सिंहावलोकन है।
APP_INITIALIZER अब वेधशालाओं का समर्थन करता है
अब तक, के साथ वेधशालाओं का उपयोग करना संभव नहीं था APP_INITIALIZER
. कोणीय 12 के रूप में, अब हम ऐसा कर सकते हैं, जो क्लीनर कोड की अनुमति देने वाला है!
यदि आप अभी तक एंगुलर की इस विशेषता के बारे में नहीं जानते हैं, APP_INITIALIZER
is एक टोकन जिसका उपयोग हम उन कार्यों को परिभाषित करने के लिए कर सकते हैं जिन्हें एप्लिकेशन इनिशियलाइज़ेशन के दौरान निष्पादित करने की आवश्यकता होती है। यदि वह फ़ंक्शन अतुल्यकालिक है, तो a . लौटा रहा है Promise
या एक Observable
(नया: पी), फिर कोणीय आवेदन शुरू करने से पहले इसके पूरा होने की प्रतीक्षा करता है।
यह परिवर्तन स्वागत योग्य से अधिक है, क्योंकि इसका अर्थ है कि हम RxJS का उपयोग करके और भी अधिक कोड लिख सकते हैं, बजाय इसके कि हमें "वापस आना" पड़े Promise
एपीआई।
आप इसके बारे में अधिक पढ़ सकते हैं यहाँ उत्पन्न करें.
एनिमेशन पर रनटाइम नियंत्रण
पहले, एनिमेशन को अक्षम करने का एकमात्र तरीका प्रदान करना था NoopAnimationsModule
. एंगुलर 12 के अनुसार, रनटाइम जानकारी के आधार पर एनिमेशन को अक्षम करना अब संभव है BrowserAnimationModule.withConfig
विधि, और इसे पारित करना disableAnimations
बूलियन संपत्ति।
स्थान सेवा पर नया इतिहासगो विधि
RSI LocationService
कोणीय के अब शामिल हैं a historyGo
विधि, जिसका उपयोग सत्र इतिहास में किसी विशिष्ट पृष्ठ पर नेविगेट करने के लिए किया जा सकता है, जिसे वर्तमान पृष्ठ पर उसकी सापेक्ष स्थिति द्वारा पहचाना जाता है। यह विधि देशी से मेल खाती है window.history.go
विधि. एमडीएन देखें कुछ उदाहरणों के लिए।
भाषा सेवा में सुधार
भाषा सेवा, जो कि IDEs को कोणीय कोड के बारे में सभी उपयोगी अंतर्दृष्टि प्रदान करती है, में भी इस रिलीज़ के साथ सुधार हुआ है।
कोणीय 12 के साथ, भाषा सेवा डिफ़ॉल्ट रूप से सक्षम होती है (पहले इसके लिए हमें ऑप्ट-इन करने की आवश्यकता होती थी)।
कोणीय 12 के रूप में, यह भी पता लगाएगा कि क्या सख्त टेम्पलेट प्रकार की जाँच सक्षम नहीं है, और आपको उन्हें सक्षम करने की सलाह देंगे.
भाषा सेवा में अब प्रदर्शन ट्रेसिंग क्षमताएं भी शामिल हैं, जिसका उपयोग प्रदर्शन को ट्रेस करने के लिए किया जा सकता है। इसे VSCode में सक्षम किया जा सकता है, जैसा यहाँ बताया गया है (हालांकि यह काफी निम्न स्तर है)।
यदि आप अभी तक भाषा सेवा के बारे में नहीं जानते हैं, तो देखें आधिकारिक दस्तावेज़, या द्वारा लिखी गई अच्छी ब्लॉग पोस्ट निंजा दस्ते, या यह वीडियो परिचय.
सीधे HTML टेम्प्लेट से लिंट नियम अक्षम करें
कोणीय टेम्पलेट कंपाइलर अब HTML टिप्पणियों का ट्रैक रखता है।
पहले, HTML टेम्प्लेट से लिंटर नियमों को अक्षम करना संभव नहीं था क्योंकि एंगुलर टेम्प्लेट कंपाइलर ने टिप्पणियों को अनदेखा कर दिया था। समाधान घटक के नियंत्रक से पूरे टेम्पलेट के लिए उन नियमों को अक्षम करना था। इस परिवर्तन के लिए धन्यवाद, अब इसे टेम्पलेट से अधिक सटीक रूप से करना संभव होगा:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
क्लीनर कोड के लिए हाँ!
डेटपाइप अब सप्ताह के आईसीयू मानक स्टैंड अलोन दिन का समर्थन करता है
पहले, यह संभव नहीं था डेटपाइप का उपयोग करके सप्ताह के अकेले दिन खड़े होने की तारीख को प्रारूपित करने के लिए।
इस परिवर्तन के लिए धन्यवाद, फ़िनिश तिथि स्वरूपण अब समर्थित है, और मुझे यकीन है कि यह कोणीय समुदाय के एक अंश के लिए बहुत अच्छी खबर है
फॉरवर्डरेफ के लिए सहायता प्रदान की गई इंजेक्टेबल डेकोरेटर्स के क्षेत्रों में
अब इसका उपयोग करना संभव है forwardRef
के अंदर providedIn
का क्षेत्र @Injectable
डेकोरेटर
रिसोर्सहोस्ट इंटरफेस पर नया ट्रांसफॉर्म रिसोर्स हुक
A transformResource
विधि में जोड़ा गया है ResourceHost
इंटरफेस। इसके लिए धन्यवाद, टूलिंग के लिए अब इनलाइन शैलियों के लिए प्रीप्रोसेसर समर्थन शुरू करने जैसी चीजें करना संभव है। यह वही है जो इनलाइन शैलियों के साथ SASS के लिए नए समर्थन को सक्षम बनाता है।
आप इसके बारे में और जान सकते हैं यहाँ उत्पन्न करें और यहाँ उत्पन्न करें.
कस्टम राउटर आउटलेट कार्यान्वयन बनाना संभव है
अब तक, कस्टम राउटर आउटलेट बनाना संभव था, लेकिन कुछ हुप्स के माध्यम से कूदना आवश्यक था (यानी, कस्टम आउटलेट के साथ पंजीकरण करना ChildrenOutletContexts
).
कोणीय 12 प्रदान करता है a कस्टम राउटर आउटलेट के लिए क्लीनर समर्थन.
बग सुधार
हमेशा की तरह, इस रिलीज़ में एक गैज़िलियन बग फिक्स शामिल हैं।
यहां जारी नोटों की एक प्रति है:
- एनिमेशन: लगातार ट्रांज़िशन नेमस्पेस ऑर्डरिंग सुनिश्चित करें (#19854) (01cc995)
- एनिमेशन: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (e918250)
- एनिमेशन: जब रूट व्यू हटा दिया जाता है तो डीओएम तत्वों को साफ करें (#41059) (c49b280)
- एनिमेशन: छाया डोम में तत्वों पर एनिमेशन की अनुमति दें (#40134) (पिता42c8), बंद करता है #25672
- एनिमेशन: जब रूट व्यू हटा दिया जाता है तो डीओएम तत्वों को साफ करें (#41001) (a31da48)
- बेज़ेल: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (8503246)
- बेज़ेल: नियम_नोडज में नवीनतम परिवर्तनों के लिए बिल्ड टूलिंग अपडेट करें (#40710) (696f7बीसी)
- बेज़ेल: उपयोग करने के लिए अद्यतन एकीकरण परीक्षण नियम_नोडज्स@3.1.0 (#40710) (६१२५६७२डी६२१ए)
- बेज़ेल: JSON.parse उपयोग के लिए अद्यतन प्रकार कास्टिंग (#40710) (2c90391)
- बेंच प्रेस: JSON.parse उपयोग के लिए अद्यतन प्रकार कास्टिंग (#40710) (ई721ए5डी)
- सामान्य: HttpClient अनुरोध निकाय के साथ बूलियन मानों के लिए सही सामग्री प्रकार जोड़ें (#38924) (#41885) (922a602)
- सामान्य: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (f2b6fd8)
- सामान्य: व्यूपोर्ट स्क्रोलर छाया डोम के अंदर तत्व नहीं ढूंढ रहा है (#41644) (c0f5ba3), बंद करता है #41470
- सामान्य: अस्थायी रूप से पुन: निर्यात और पदावनत
XhrFactory
(#41393) (7d446) - सामान्य: जब रूट व्यू हटा दिया जाता है तो सफाई स्थान श्रोताओं को बदल देता है (#40867) (38524c4), बंद करता है #31546
- सामान्य: संख्या या बूलियन को http params के रूप में अनुमति दें (#40663) (१३५७७४ सीडीसी७८२), बंद करता है #23856
- सामान्य: NgTemplateOutlet में संदर्भ वस्तु को बदलने से बचें (#40360) (डी२७३८६३७३८बी४), बंद करता है #24515
- संकलक: encapsulated शैलियों में @ पृष्ठ नियमों को संरक्षित करें (#41915) (3ई365बीए), बंद करता है #26269
- संकलक: स्ट्रिप स्कॉप्ड चयनकर्ता
@font-face
नियम (#41815) (2ए11सीडीए), बंद करता है #41751 - संकलक: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (bae8126)
- संकलक: आंशिक संकलन में गैर-शाब्दिक इनलाइन टेम्प्लेट गलत तरीके से संसाधित किए गए (#41583) (ab257b3)
- संकलक: वैकल्पिक नामस्थानों के अंदर एनजी-टेम्पलेट के लिए अद्यतन निर्देश उत्पन्न नहीं करना (#41669) (२बीसीबीबीडीए), बंद करता है #41308
- संकलक: EmptyExpr को पीछे की ओर से पार्स करने से बचें (#41581) (e1a2930)
- संकलक: केस-संवेदी सीएसएस कस्टम गुणों को संभालें (#41380) (e112e32), बंद करता है #41364
- संकलक: आंशिक घटक घोषणा के जेआईटी संकलन के दौरान प्रयुक्त घटकों को शामिल करें (#41353) (एफएफ9470बी), बंद करता है #41104 #41318
- संकलक: एकाधिक का समर्थन करें
:host-context()
चयनकर्ता (#40494) (07), बंद करता है #19199 - संकलक: JSON.parse उपयोग के लिए अद्यतन प्रकार कास्टिंग (#40710) (f728490)
- संकलक-क्ली: अप्रत्यक्ष टेम्पलेट्स के स्रोत मानचित्र URL के लिए ” का उपयोग करें (#41973) (7a4d980), बंद करता है #40854
- संकलक-क्ली: लिंकर को बैबेल प्लगइन के रूप में बेनकाब करें (#41918) (8fdac8f)
- संकलक-क्ली: संदर्भ उत्सर्जक में गैर-अलियास निर्यात को प्राथमिकता दें (#41866) (75bb931), बंद करता है #41443 #41277
- संकलक-क्ली: लिंकर को मिनिफाइड बूलियन्स को प्रोसेस करने की अनुमति दें (#41747) (1fb6724), बंद करता है #41655
- संकलक-क्ली: मिलान स्ट्रिंग अनुक्रमित आंशिक घोषणाएं (#41747) (f885750), बंद करता है #41655
- संकलक-क्ली: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (5b463f4)
- संकलक-क्ली: टेम्पलेट्स में स्वत: पूर्ण शाब्दिक प्रकार। (#41456) (#41645) (8b2b5ef)
- संकलक-क्ली: यदि घटक में कोई इनलाइन शैलियाँ नहीं हैं, तो प्रीपोसेसिंग में त्रुटि न करें (#41602) (a5fe8b9)
- संकलक-क्ली: कंपाइलर ट्रैक सुनिश्चित करें
ts.Program
सही ढंग से (#41291) (decc74) - संकलक-क्ली: वृद्धिशील पुनर्संकलन में डिफ़ॉल्ट आयात को समाप्त करने से रोकें (#41557) (7f16515), बंद करता है #41377
- संकलक-क्ली: संकल्प
rootDirs
निरपेक्ष करने के लिए (#41359) (3e0fda9), बंद करता है #36290 - संकलक-क्ली: जोड़ना
useInlining
चेक कॉन्फिग टाइप करने का विकल्प (#41043) (09एईएफडी2), बंद करता है #40963 - संकलक-क्ली:
readConfiguration
मौजूदा विकल्पों को tsconfig में विकल्पों को ओवरराइड करना चाहिए (#40694) (बी४७सी९८०७९डी२३) - संकलक-क्ली: विस्तार
angularCompilerOptions
नोड से tsconfig में (#40694) (5eb1954), बंद करता है #36715 - संकलक-क्ली: नियम_नोडज में नवीनतम परिवर्तनों के लिए एनजीसीसी एकीकरण परीक्षण अपडेट करें (#40710) (डी7एफ5755)
- संकलक-क्ली: JSON.parse उपयोग के लिए अद्यतन प्रकार कास्टिंग (#40710) (b75d7cb)
- कोर: गतिशील रूप से संकलित घटकों और मॉड्यूल को बनाए न रखें (#42003) (1449c5c), बंद करता है #19997
- कोर: ngOnDestroy जीवनचक्र हुक के आसपास प्रोफाइलर का आह्वान करें (#41969) (ई9डीडीसी57)
- कोर: AsyncPipe अब RxJS 7 के साथ संगत है (#41590) (९७५९बीसीए)
- कोर: अभिव्यक्ति बाइंडिंग के साथ कई i18n विशेषताओं को संभालें (#41882) (73c6c64), बंद करता है #41869
- कोर: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (f9c1f08)
- कोर: संश्लेषित कंस्ट्रक्टर्स का पता लगाएं जिन्हें TS 4.2 का उपयोग करके डाउनलेवल किया गया है (#41305) (274dc15), बंद करता है #41298
- कोर: स्विच
emitDistinctChangesOnlyDefaultValue
सच करने के लिए (#41121) (7096246) - कोर: डुप्लिकेट किए गए EMPTY_OBJ स्थिरांक को हटा दें (#41066) (बीएफ158ई7)
- कोर: डुप्लिकेट किए गए EMPTY_ARRAY स्थिरांक को हटा दें (#40991) (e12d9de)
- कोर: EmbeddedViewRef संदर्भ को अद्यतन करने की अनुमति दें (#40360) (ए३०८८०३७ई४७८), बंद करता है #24515
- कोर: DefaultIterableDiffer डुप्लिकेट का क्रम बनाए रखें (#23941) (a826926), बंद करता है #23815
- कोर: एनजीज़ोन कोलेसिंग विकल्प सही ढंग से ऑनस्टेबल को ट्रिगर करना चाहिए (#40540) (22f9e45)
- तत्वों: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (4f5d094)
- तत्वों: JSON.parse उपयोग के लिए अद्यतन प्रकार कास्टिंग (#40710) (ईएफडी4149)
- रूपों: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (डीसी९७५बीए)
- एचटीटीपी: टाइमआउट पर अनुरोध पूरा करें (#39807) (६९६८३५३२४ए८२६बी२डी), बंद करता है #26453
- एचटीटीपी: XMLHttpRequest निरस्त घटना पर उत्सर्जन त्रुटि (#40767) (3897265), बंद करता है #22324
- भाषा-सेवा: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (9b6198c)
- भाषा-सेवा: वृद्धिशील संकलन के लिए स्क्रिप्ट संस्करणों का उपयोग करें (#41475) (78236bf)
- भाषा-सेवा: केवल टेम्प्लेट में कोणीय संपत्ति पूर्णता प्रदान करें (#41278) (0226a11)
- भाषा-सेवा: सख्त टेम्पलेट्स को बाध्य करने के लिए प्लगइन विकल्प जोड़ें (#41062) (ई9ई7सी33)
- भाषा-सेवा: आइवी और व्यू इंजन के लिए सिंगल एंट्री पॉइंट का उपयोग करें (#40967) (e986a97)
- स्थानीय बनाना: छूटे हुए लक्ष्य के लिए चेतावनी में त्रुटि को शिथिल करें (#41944) (35ceed2), बंद करता है #21690
- स्थानीय बनाना: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (658ed1f)
- स्थानीय बनाना: JSON.parse उपयोग के लिए अद्यतन प्रकार कास्टिंग (#40710) (4b469c9)
- एनजीसीसी: संश्लेषित कंस्ट्रक्टर्स का पता लगाएं जिन्हें TS 4.2 का उपयोग करके डाउनलेवल किया गया है (#41305) (६११डी३०डीए७४८६०), बंद करता है #41298
- मंच-ब्राउज़र: यदि शैडो डोम इनकैप्सुलेशन का उपयोग किया जाता है तो स्टाइल नोड्स की मेमोरी लीक को रोकें (#42005) (d555555), बंद करता है #36655
- मंच-ब्राउज़र: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (ईए05cfd)
- मंच-ब्राउज़र: कॉन्फ़िगर
XhrFactory
उपयोग करने के लिएBrowserXhr
(#41313) (e0028e5), बंद करता है #41311 - मंच-ब्राउज़र: JSON.parse उपयोग के लिए अद्यतन प्रकार कास्टिंग (#40710) (7ईसीएफडी2डी)
- मंच-ब्राउज़र-गतिशील: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (bc45029)
- मंच-सर्वर: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (4b9d4fa)
- राउटर: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (0067 डिड)
- राउटर: केवल संग्रहीत मार्ग को पुनः प्राप्त करें जब पुन: उपयोग रणनीति इंगित करती है कि इसे फिर से जोड़ना चाहिए (#30263) (A4ff071), बंद करता है #23162
- राउटर: रिक्त पथ मिलानों को पुनरावर्ती रूप से मर्ज करें (#41584) (1179dc8), बंद करता है #41481
- राउटर: टुकड़ा शून्य हो सकता है (#37336) (b555160), बंद करता है #23894 #34197
- राउटर: JSON.parse उपयोग के लिए अद्यतन प्रकार कास्टिंग (#40710) (350 दादा)
- सेवा-कार्यकर्ता: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (6b823d7)
- सेवा-कार्यकर्ता: JSON.parse उपयोग के लिए अद्यतन प्रकार कास्टिंग (#40710) (4f7ff96)
- उन्नयन: $interval.flush को सुरक्षित रखें जब ngMocks का उपयोग किया जा रहा हो (#30229) (87dc851)
- उन्नयन: केवल एलटीएस संस्करण शामिल करने के लिए नोड संस्करणों की समर्थित श्रेणी को अपडेट करें (#41822) (10c4523)
वैसे, क्या आपने नोटिस किया कि AsyncPipe
कर दिया गया है समझौता बेन लेश द्वारा RxJS 6 और 7 दोनों के साथ संगत होने के लिए? कितना मजेदार था वो?
ब्रेकिंग परिवर्तन
हमेशा की तरह, इस रिलीज़ के साथ कई महत्वपूर्ण परिवर्तन हुए हैं।
As आधिकारिक रिलीज नोट बहुत स्पष्ट हैं, मैं यहां उनको कॉपी/पेस्ट कर रहा हूं:
- वितरित NPM पैकेज में अब न्यूनतम UMD बंडल शामिल नहीं हैं।
- एनिमेशन: जब रूट व्यू हटा दिया जाता है तो डोम तत्व अब सही ढंग से हटा दिए जाते हैं। यदि आप SSR का उपयोग कर रहे हैं और रेंडरिंग के लिए ऐप के HTML का उपयोग कर रहे हैं, तो आपको ऐप को नष्ट करने से पहले यह सुनिश्चित करना होगा कि आप HTML को एक वैरिएबल में सेव कर लें। यह भी संभव है कि किसी ऐसे तत्व को खोजने का प्रयास करके परीक्षण गलती से पुराने व्यवहार पर निर्भर हो सकते हैं जिसे पिछले परीक्षण में हटाया नहीं गया था। यदि ऐसा है, तो असफल परीक्षणों को यह सुनिश्चित करने के लिए अद्यतन किया जाना चाहिए कि उनके पास उचित सेटअप कोड है जो उन तत्वों को प्रारंभ करता है जिन पर वे भरोसा करते हैं
- सामान्य: के तरीके
PlatformLocation
वर्ग, अर्थात्onPopState
औरonHashChange
, लौटते थेvoid
. अब वे विधियाँ फ़ंक्शन लौटाती हैं जिन्हें ईवेंट हैंडलर को हटाने के लिए कहा जा सकता है - सामान्य: के तरीके
HttpParams
कक्षा अब स्वीकार करेंstring | number | boolean
के बजायstring
एक पैरामीटर के मान के लिए। यदि आपने अपने आवेदन में इस वर्ग का विस्तार किया है, तो आपको इन परिवर्तनों को दर्शाने के लिए अपनी विधियों के हस्ताक्षरों को अद्यतन करना होगा - संकलक-क्ली: लिंक्ड लाइब्रेरी अब लीगेसी i18n संदेश आईडी उत्पन्न नहीं करती हैं। कोई भी डाउनस्ट्रीम एप्लिकेशन जो इन संदेशों के लिए अनुवाद प्रदान करता है, उन्हें इन संदेशों का उपयोग करके अपनी संदेश आईडी माइग्रेट करने की आवश्यकता होगी
localize-migrate
कमांड लाइन उपकरण - मूल: कोणीय अब नोड v10 के लिए समर्थन नहीं रखता है, इसलिए यदि आप अभी भी इसे अपने विकास पर्यावरण के लिए उपयोग कर रहे हैं, तो यह वास्तव में अपग्रेड करने का समय है!
- मूल: पहले
ng.getDirectives
किसी दिए गए DOM नोड के साथ कोई कोणीय संदर्भ संबद्ध नहीं होने की स्थिति में फ़ंक्शन ने एक त्रुटि फेंक दी (उदाहरण के लिए यदि किसी फ़ंक्शन को किसी कोणीय ऐप के बाहर DOM तत्व के लिए बुलाया गया था)। यह व्यवहार अन्य डिबगिंग उपयोगिताओं के तहत असंगत थाng
नेमस्पेस, जिसने अपवाद उठाए बिना इस स्थिति को संभाला। अब कॉल कर रहे हैंng.getDirectives
ऐसे डोम नोड्स के लिए फ़ंक्शन के परिणामस्वरूप उस फ़ंक्शन कोर से एक खाली सरणी वापस आ जाएगी: का डिफ़ॉल्ट स्विचिंगemitDistinctChangesOnlyDefaultValue
जो डिफ़ॉल्ट व्यवहार को बदल देता है और कुछ अनुप्रयोगों को विफल कर सकता है जो गलत व्यवहार पर भरोसा करते हैं
emitDistinctChangesOnly
ध्वज को भी हटा दिया गया है और भविष्य में प्रमुख रिलीज में हटा दिया जाएगा
पिछला कार्यान्वयन परिवर्तनों को आग देगा QueryList.changes.subscribe
जब भी QueryList
पुनर्गणना की गई। इसके परिणामस्वरूप कृत्रिम रूप से बड़ी संख्या में परिवर्तन सूचनाएं प्राप्त हुईं, क्योंकि यह संभव है कि पुनर्गणना QueryList
एक ही सूची में परिणाम। जब QueryList
पुनर्गणना हो जाता है एक कार्यान्वयन विवरण है, और यह वह चीज नहीं होनी चाहिए जो यह निर्धारित करती है कि घटना को कितनी बार बदलना चाहिए।
दुर्भाग्य से, व्यवहार को एकमुश्त ठीक करने से बहुत से मौजूदा एप्लिकेशन विफल हो गए। इस कारण से, कोणीय इस फिक्स को एक ब्रेकिंग फिक्स मानता है और इसमें एक ध्वज पेश किया है @ContentChildren
और @ViewChildren
, जो व्यवहार को नियंत्रित करता है।
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
v12 . से पहले पश्चगामी संगतता के लिएemitDistinctChangesOnlyDefaultValue
करने के लिए स्थापित किया गया था false
. यह बदलाव
डिफ़ॉल्ट को बदल देता है true
.
- कोर: के प्रकार
APP_INITIALIZER
टोकन को एंगुलर द्वारा नियंत्रित किए जाने वाले रिटर्न वैल्यू के प्रकारों को अधिक सटीक रूप से प्रतिबिंबित करने के लिए बदल दिया गया है। पहले, प्रत्येक इनिशियलाइज़र कॉलबैक को वापस करने के लिए टाइप किया गया थाany
, यह है अबPromise<unknown> | Observable<unknown> | void
. असंभावित घटना में कि आपका एप्लिकेशन उपयोग करता हैInjector.get
orTestBed.inject
एपीआई इंजेक्ट करने के लिएAPP_INITIALIZER
टोकन, आपको सख्त प्रकार के लिए कोड को खाते में अपडेट करने की आवश्यकता हो सकती है।
साथ ही, टाइपस्क्रिप्ट TS2742 त्रुटि की रिपोर्ट कर सकता है यदि: APP_INITIALIZER
टोकन का उपयोग उस अभिव्यक्ति में किया जाता है जिसके अनुमानित प्रकार को .d.ts फ़ाइल में उत्सर्जित किया जाना है। इसे हल करने के लिए, एक स्पष्ट प्रकार के एनोटेशन की आवश्यकता होती है, जो आमतौर पर होगा Provider
or Provider[]
.
-
कोर: न्यूनतम समर्थित
zone.js
संस्करण है0.11.4
. इस प्रकार इसका मतलब है कि यदि आप पुराने संस्करण का उपयोग कर रहे हैं, तो यह आपके प्रोजेक्ट में ज़ोन.जेएस को अपग्रेड करने का भी समय है! -
रूपों: RSI
emitEvent
विकल्प निम्नलिखित में जोड़ा गया थाFormArray
औरFormGroup
विधि: -
फॉर्मग्रुप.एडकंट्रोल
-
फॉर्मग्रुप.रिमूवकंट्रोल
-
फॉर्मग्रुप.सेटकंट्रोल
-
फॉर्मअरे.पुश
-
फॉर्मअरे.डालें
-
फॉर्मएरे.रिमूवएट
-
फॉर्मएरे.सेटकंट्रोल
-
फॉर्मअरे.क्लियर
यदि आपके ऐप में कस्टम कक्षाएं हैं जो विस्तारित होती हैं FormArray
or FormGroup
कक्षाएं और ओवरराइड करें
उपर्युक्त विधियों में, नए विकल्पों को लेने के लिए आपको अपने कार्यान्वयन को अद्यतन करने की आवश्यकता हो सकती है
खाता और सुनिश्चित करें कि ओवरराइड एक प्रकार के दृष्टिकोण से संगत हैं।
- रूपों: पहले से
min
औरmax
पर परिभाषित गुण<input type="number">
प्रपत्र मॉड्यूल द्वारा अनदेखा किया गया। अब इन विशेषताओं की उपस्थिति होगी
न्यूनतम/अधिकतम सत्यापन तर्क ट्रिगर करें (मामले मेंformControl
,formControlName
orngModel
निर्देश किसी दिए गए इनपुट पर भी मौजूद होते हैं) और
संबंधित प्रपत्र नियंत्रण स्थिति यह दर्शाएगी। - मंच-ब्राउज़र:
XhrFactory
से ले जाया गया है@angular/common/http
सेवा मेरे@angular/common
.
से पहले
import { XhrFactory } from '@angular/common/http';
बाद
import { XhrFactory } from '@angular/common';
- राउटर: सख्त अशक्त जांच संभावित रूप से अशक्त होने पर खंड पर रिपोर्ट करेगी।
माइग्रेशन पथ: नल चेक जोड़ें। - राउटर: के प्रकार
RouterLinkActive.routerLinkActiveOptions
इनपुट था
अधिक परिष्कृत नियंत्रण की अनुमति देने के लिए विस्तारित किया गया। कोड जो पहले पढ़ा था
इस संपत्ति को नए प्रकार के खाते में अपडेट करने की आवश्यकता हो सकती है।
अपडेट किया गया रोडमैप
वर्तमान कोणीय के अनुसार रोडमैप, टीम अब निम्नलिखित सुधारों में व्यस्त है:
- डिबगिंग और प्रोफाइलिंग करते समय डेवलपर अनुभव में सुधार करना। इससे हमें घटक संरचना को समझने में मदद मिलनी चाहिए (मुझे लगता है कि रिएक्ट देव उपकरण प्रतिक्रिया के लिए अनुमति देते हैं), और पता लगाने में बदलाव
- परीक्षण के समय में सुधार और स्वचालित फाड़ के साथ डिबगिंग: इससे परीक्षणों और परीक्षण समय के बीच अलगाव में सुधार होना चाहिए। टेस्टबेड प्रत्येक परीक्षण निष्पादित होने के बाद परीक्षण वातावरण को स्वचालित रूप से साफ करने और फाड़ने के लिए भी बदल दिया जाएगा
- डिफ़ॉल्ट आउटपुट के रूप में ES2017+ का उपयोग करना: वे बाधाओं की पहचान करेंगे और उन्हें हटा देंगे ताकि डिफ़ॉल्ट आउटपुट भाषा को अपग्रेड किया जा सके
- एमडीसी वेब को कोणीय सामग्री में एकीकृत करना
- कोणीय सामग्री घटकों की पहुंच में सुधार
- उन्नत अवधारणाओं जैसे परिवर्तन का पता लगाने, प्रदर्शन प्रोफाइलिंग, ज़ोन.जेएस के साथ बातचीत, आदि के बारे में प्रकाशन मार्गदर्शिकाएँ
- e2e परीक्षण रणनीति को अद्यतन करना (ऊपर cfr)
- RxJS v7+ में अपग्रेड की तैयारी। जैसा कि आप जानते होंगे, RxJS 7 रहा है हाल ही में जारी किया गया. उम्मीद है कि हम जल्द ही अपग्रेड करने में सक्षम होंगे
भविष्य में, कोणीय टीम की योजना है:
- माइक्रो फ्रंटएंड आर्किटेक्चर में देखें: वे एंगुलर का उपयोग करके आसानी से माइक्रो फ्रंटएंड बनाने के लिए हमारे लिए साधन पेश कर सकते हैं
- कोणीय रूपों के लिए सख्त टाइपिंग के साथ डेवलपर अनुभव में सुधार करें (हमें इसकी सख्त आवश्यकता है)
- Zone.js को वैकल्पिक बनाएं, जो ढांचे को सरल बनाना चाहिए, डिबगिंग में सुधार करना चाहिए, बंडल आकार को कम करना चाहिए और यहां तक कि मूल async/प्रतीक्षा सिंटैक्स का लाभ उठाने की अनुमति देना चाहिए
- कोणीय संकलक को एकीकृत करके निर्माण प्रदर्शन में सुधार करें (
ngc
) टाइपस्क्रिप्ट कंपाइलर प्लगइन के रूप में - तत्वों को होस्ट करने के लिए निर्देश जोड़ने की अनुमति दें। यह समाज द्वारा बहुत समय से अनुरोध भी किया जाता रहा है !
- सीखने की अवस्था को आसान बनाने के लिए NgModules को वैकल्पिक बनाएं
- हमें घटक-स्तर पर कोड-विभाजन को लागू करने के आसान साधन प्रदान करें
कोणीय सामग्री और कोणीय सीडीके
सैस माइग्रेशन
आंतरिक रूप से, कोणीय सामग्री और सीडीके दोनों . में माइग्रेट हो गए हैं नया सैस मॉड्यूल सिस्टम.
यदि आपका एप्लिकेशन इनमें से किसी एक का उपयोग करता है, तो आपको यह सुनिश्चित करना होगा कि आपने इसे बदल दिया है node-sass
by sass
: https://www.npmjs.com/package/sass। NS node-sass
पैकेज अब और नहीं रखा गया है!
इस माइग्रेशन के साथ, Sass थीमिंग API को बढ़ाया गया है, और अब यह हमें Sass का लाभ उठाने की अनुमति देता है @use
उपयोगिता।
के लिए अब एक एकल प्रवेश बिंदु है @angular/material
और @angular/cdk
.
अंत में, स्पष्टता के लिए एपीआई को भी बदल दिया गया है। रास्ते में कई कार्यों, मिश्रणों और चरों का नाम बदल दिया गया है।
आप इन परिवर्तनों के बारे में नई थीम गाइड में अधिक जानकारी प्राप्त कर सकते हैं: https://github.com/angular/components/blob/master/guides/theming.md। इसके अलावा, ध्यान दें कि https://material.angular.io पर गाइड को नए एपीआई को प्रदर्शित करने और स्पष्टीकरण शामिल करने के लिए फिर से लिखा गया है।
अपग्रेड प्रक्रिया स्वचालित रूप से कोड को नए Sass API में माइग्रेट कर देगी। आप उदाहरणों के पहले/बाद में पा सकते हैं यहाँ उत्पन्न करें.
कोणीय सीडीके परिवर्तन
संस्करण 12 में कई शामिल हैं परिवर्तन कोणीय सीडीके के लिए।
यहां, मैं केवल नई सुविधाओं की सूची दूंगा, लेकिन यदि आप बग फिक्स और प्रदर्शन सुधार के बारे में विवरण चाहते हैं तो आप रिलीज नोट्स देख सकते हैं:
- खींचें और छोड़ें: गिराई गई घटना में अब शामिल है a
dropPoint
संपत्ति, सटीक बिंदु का निर्धारण जहां माउस इंगित किया गया था जब आइटम गिरा दिया गया था। और जानकारी यहाँ उत्पन्न करें - खींचें और छोड़ें: पूर्वावलोकन कंटेनर अब अनुकूलित किया जा सकता है
- तालिका: एक नया निर्देश अनुमति देता है रीसायकल व्यू रिपीटर को सक्षम करें, जो निपटाने वाली पंक्तियों को कैश करता है और डेटासेट बदलने पर उनका पुन: उपयोग करता है। यह प्रदर्शन को बेहतर बनाने में मदद कर सकता है (विलंबता कम करें)
- तालिका: जब जोड़ा गया चिपचिपा तत्वों के ऑफसेट
StickyUpdate
इंटरफेस - Stepper: जब कोई उपयोगकर्ता एक कदम से दूर जाने की कोशिश करता है, तो a
interacted
घटना अब होगी उत्सर्जित - Stepper: अभिविन्यास अब हो सकता है बदल
- अभिगम्यता: एक
FocusOptions
वस्तु अब पारित किया जा सकता है विभिन्न फोकस ट्रैप विधियों में - परीक्षण: नया वेबड्राइवर हार्नेस वातावरण। मैंने अभी तक इसमें गोता नहीं लगाया है इसलिए मैं आपको और नहीं बता सकता। चेक आउट जनसंपर्क
कोणीय सामग्री परिवर्तन
इसमें भी कई हैं कोणीय सामग्री के लिए परिवर्तन. फिर से, बग फिक्स की पूरी सूची के लिए रिलीज नोट्स देखें।
नई सुविधाएँ:
- खजूर बीनने वाला: अब निर्भर नहीं करता संवाद पर
- Stepper: अभिविन्यास अब गतिशील रूप से बदला जा सकता है (सीएफआर सीडीके में समान परिवर्तन)
- Stepper: सामग्री होने दें आलसी गाया
- मेन्यू: मेनू स्थिति को अपडेट करने की अनुमति दें प्रोग्राम के रूप में
- चटाई त्रुटि: अब उपयोग करता है
aria-live="polite"
के बजायrole="alert"
. अधिक जानकारी यहाँ उत्पन्न करें - टैब्स: विधि जोड़ें प्रोग्रामेटिक रूप से एक विशिष्ट टैब पर फ़ोकस सेट करें
- सूची: अब से बदले गए विकल्पों के साथ एक सरणी देता है
selectAll
औरdeselectAll
तरीके। चेक आउट जनसंपर्क ब्योरा हेतु - स्लाइड टॉगल: की अनुमति विश्व स्तर पर एक डिफ़ॉल्ट रंग कॉन्फ़िगर करें एक प्रदाता के माध्यम से
- Tooltip: अब घटक पर एक वर्ग के माध्यम से टूलटिप की प्रभावी स्थिति को उजागर करता है
- रेडियो, चेकबॉक्स और स्लाइडर: उन घटकों की पृष्ठभूमि का रंग शामिल करें प्रिंट स्टाइलशीट
प्रायोगिक संस्करण में भी कई बदलाव हैं: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental।
कोणीय सार्वभौमिक
कोणीय यूनिवर्सल 12 भी है ओवन से ताजा.
इस रिलीज के साथ, अब यूनिवर्सल डिफ़ॉल्ट रूप से महत्वपूर्ण सीएसएस को इनलाइन करें, जो बहुत अच्छा है।
यूनिवर्सल में अब एक नया शामिल है proxyConfig
को कस्टम प्रॉक्सी कॉन्फ़िगरेशन प्रदान करने का विकल्प ssr-dev-server
बिल्डर।
इस संस्करण में, एक नया (प्रयोगात्मक) SSR इंजन है जिसे कहा जाता है तिपतिया घास (मुझे जावा पारिस्थितिकी तंत्र में एक गुणवत्ता उपकरण की याद दिलाता है)। यह नया इंजन आशाजनक लगता है। इसका उद्देश्य चीजों को सरल बनाना है, हमें इससे छुटकारा दिलाना है Window is undefined
त्रुटि, एसएसआर/प्रीरेंडर के लिए एकाधिक बिल्ड की आवश्यकता को हटा दें, अतिरिक्त बिल्ड के बिना एप्लिकेशन शेल जेनरेट करें, और बहुत कुछ। हम शायद इसके बारे में बाद में और सुनेंगे। यदि आप उत्सुक हैं, तो देखें जनसंपर्क.
इस संस्करण में शामिल हैं a निर्माता जिसका उपयोग नए यूनिवर्सल क्लोवर दृष्टिकोण का उपयोग करके स्थिर पृष्ठ (यानी, प्री-रेंडरिंग) उत्पन्न करने के लिए किया जा सकता है।
अंत में, इस संस्करण में भी शामिल है टीएलएस समर्थन देव-सर्वर के लिए।
गूगल मैप्स
जैसा कि आप जानते हैं, कोणीय में Google मानचित्र और Youtube के घटक शामिल हैं। संस्करण 12 Google मानचित्र घटक के लिए कुछ सुधार लाता है:
- अब शामिल हैं a
icon
मार्कर को आसानी से अनुकूलित करने के लिए इनपुट - अब उत्सर्जित करता है a
clusterClick
घटना जब एक क्लस्टर क्लिक किया गया है - शामिल है एक आवरण गूगल मैप्स जियोकोडर एपीआई के आसपास, और निर्यात
MapDirectionsResponse
, जो पहले उजागर नहीं किया गया था - के लिए समर्थन का परिचय देता है हीटमैप प्रस्तुत करना
- जब जोड़ा गया
MapDirectionsRenderer
, मानचित्र पर दिशा-निर्देश प्रस्तुत करने की अनुमति देता है, औरMapDirectionsService
, जो लपेटता हैgoogle.maps.DirectionsService
गणना करने के लिए दो बिंदुओं के बीच का मार्ग. - नया
options
पर इनपुट मार्कर क्लस्टरर, अन्य निर्देशों के समान।
उन्नयन
हमेशा की तरह, एक संपूर्ण अपग्रेड गाइड उपलब्ध है, और ng update
आपकी मदद करेगा: https://update.angular.io/?l=3&v=11.0-12.0
यदि आप उपयोग कर रहे हैं एनआरएल एनएक्स (आपको वास्तव में चाहिए), ध्यान दें कि Nx 12.3 में पहले से ही Angular 12 के लिए समर्थन शामिल है! इसके बारे में और जानें यहाँ उत्पन्न करें. एक अतिरिक्त लाभ के रूप में, Nx आपको TSLint से ESLint पर माइग्रेट करने में भी मदद करेगा (और यह समय है!)
निष्कर्ष
इस लेख में, मैंने एंगुलर 12 की नई विशेषताओं की खोज की है।
हमेशा की तरह, यह रिलीज़ है वीर रस (यह और क्या हो सकता है?! ).
आइवी आगे बढ़ रहा है, और उम्मीद है, हम "जल्द ही" कम नाराज़ होंगे ngcc
, जैसा कि पारिस्थितिकी तंत्र माइग्रेट करता है। इस रिलीज़ के साथ कई शानदार परिवर्तन हुए हैं, इसलिए इसे देखें और अभी अपग्रेड करें!.
आजके लिए इतना ही!
पुनश्च: यदि आप उत्पाद/सॉफ़्टवेयर/वेब विकास के बारे में कई अन्य अच्छी चीजें सीखना चाहते हैं, तो देखें देव अवधारणाओं श्रृंखला, (https://mailchi.mp/fb661753d54a/developassion-newsletter)[मेरे न्यूज़लेटर की सदस्यता लें], और आओ ट्विटर पर नमस्ते कहें!
- एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
- प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
- स्रोत: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- योग्य
- About
- इसके बारे में
- ऊपर
- पूर्ण
- स्वीकार करें
- स्वीकार करता है
- पहुँच
- एक्सेसिबिलिटी
- लेखा
- सही रूप में
- वास्तव में
- जोड़ा
- इसके अलावा
- उन्नत
- लाभ
- बाद
- करना
- चेतावनी
- कलन विधि
- एल्गोरिदम
- सब
- की अनुमति दे
- की अनुमति देता है
- अकेला
- पहले ही
- वैकल्पिक
- विकल्प
- हालांकि
- हमेशा
- के बीच में
- और
- कोणीय
- एनिमेशन
- की घोषणा
- घोषणा
- अन्य
- कहीं भी
- एपीआई
- एपीआई
- अनुप्रयोग
- दिखाई देते हैं
- आवेदन
- अनुप्रयोगों
- दृष्टिकोण
- अप्रैल
- स्थापत्य
- चारों ओर
- ऐरे
- लेख
- लेख
- जुड़े
- विशेषताओं
- लेखकों
- स्वचालित
- स्वतः
- उपलब्धता
- उपलब्ध
- कोलाहल
- वापस
- बैक-एंड
- पृष्ठभूमि
- बार
- आधारित
- आधार
- क्योंकि
- से पहले
- जा रहा है
- लाभ
- बेहतर
- के बीच
- बड़ा
- सबसे बड़ा
- बिट
- ब्लॉग
- ब्रांड
- ब्रांड नई
- तोड़कर
- लाता है
- लाया
- ब्राउज़र
- ब्राउज़रों
- दोष
- निर्माण
- निर्माता
- इमारत
- बनाता है
- में निर्मित
- बंडल
- बोझ
- बुलाया
- बुला
- क्षमताओं
- मामला
- मामलों
- कारण
- के कारण होता
- परिवर्तन
- परिवर्तन
- चेक
- जाँचता
- Chrome
- स्पष्टता
- कक्षा
- कक्षाएं
- स्पष्ट
- स्पष्ट रूप से
- बंद कर देता है
- समूह
- कोड
- एकत्रित
- रंग
- अ रहे है
- टिप्पणियाँ
- समुदाय
- अनुकूलता
- संगत
- पूरा
- जटिल
- अंग
- घटकों
- अवधारणाओं
- चिंतित
- निष्कर्ष
- जुड़ा हुआ
- समझता है
- संगत
- स्थिर
- उपभोग
- कंटेनर
- सामग्री
- प्रसंग
- जारी रखने के
- नियंत्रण
- नियंत्रक
- नियंत्रण
- ठंडा
- मूल
- मेल खाती है
- लागत
- सका
- पाठ्यक्रम
- आवरण
- कवर
- बनाना
- बनाया
- बनाना
- निर्माण
- महत्वपूर्ण
- क्रॉस ब्राउज़र
- महत्वपूर्ण
- सीएसएस
- जिज्ञासु
- वर्तमान
- वर्तमान में
- रिवाज
- कस्टम गुण
- अनुकूलित
- तारीख
- दिन
- दिन
- मृत
- सौदा
- और गहरा
- चूक
- निर्भर करता है
- तैनाती
- गहराई
- विस्तार
- विवरण
- खोज
- निर्धारित
- निर्धारित करने
- देव
- डेवलपर
- विकास
- डीआईडी
- विभिन्न
- डीआईजी
- निर्देशों
- सीधे
- वितरित
- वितरण
- कर
- डोम
- नीचे
- डाउनलोड
- नकारात्मक पक्ष यह है
- गिरा
- ड्रॉप
- डुप्लिकेट
- दौरान
- से प्रत्येक
- आसान
- आसानी
- पारिस्थितिकी तंत्र
- प्रभावी
- प्रयास
- भी
- तत्व
- एम्बेडेड
- सक्षम
- सक्षम बनाता है
- समझाया
- शुरू से अंत तक
- ऊर्जा
- इंजन
- वर्धित
- पर्याप्त
- सुनिश्चित
- प्रविष्टि
- वातावरण
- वातावरण
- त्रुटि
- त्रुटियाँ
- विशेष रूप से
- आदि
- ईथर (ईटीएच)
- मूल्यांकन करें
- और भी
- कार्यक्रम
- घटनाओं
- हर कोई
- सब कुछ
- विकसित
- उद्विकासी
- उदाहरण
- उदाहरण
- उत्कृष्ट
- अपवाद
- निष्पादित
- निष्पादन
- मौजूदा
- विस्तारित
- अपेक्षित
- अनुभव
- समझाना
- समझाया
- समझा
- बताते हैं
- स्पष्टीकरण
- पता लगाया
- एक्सप्लोरर
- निर्यात
- उजागर
- भाव
- विस्तार
- विस्तार
- बाहरी
- अतिरिक्त
- की सुविधा
- असफल
- काफी
- गिरना
- प्रशंसक
- फास्ट
- और तेज
- डर
- Feature
- विशेषताएं
- फेडरेशन
- प्रतिक्रिया
- कुछ
- खेत
- फ़ील्ड
- पट्टिका
- फ़ाइलें
- अंत में
- खोज
- खोज
- आग
- फिक्स
- प्रवाह
- फोकस
- केंद्रित
- निम्नलिखित
- सेना
- प्रपत्र
- प्रारूप
- रूपों
- आगे
- पाया
- नींव
- अंश
- फ्रेम
- ढांचा
- से
- दृश्यपटल
- पूर्ण
- समारोह
- कार्यों
- आगे
- भविष्य
- उत्पन्न
- उत्पन्न करता है
- सृजन
- मिल
- GitHub
- देना
- दी
- देता है
- देते
- Go
- जा
- अच्छा
- गूगल
- Google Chrome
- गूगल के नक्शे
- ग्राफ
- महान
- गाइड
- मार्गदर्शिकाएँ
- संभालना
- कठिन
- होने
- सुना
- मदद
- यहाँ उत्पन्न करें
- hi
- हाई
- हाइलाइट
- इतिहास
- कांटों
- उम्मीद है कि
- मेजबान
- कैसे
- एचटीएमएल
- HTTPS
- विशाल
- मानव पठनीय
- मैं करता हूँ
- विचार
- पहचान
- पहचान करना
- प्रभाव
- लागू करने के
- कार्यान्वयन
- कार्यान्वित
- आयात
- महत्वपूर्ण
- आयात
- में सुधार
- उन्नत
- सुधार
- सुधार
- in
- शामिल
- शामिल
- शामिल
- गलत रूप से
- इंगित करता है
- परोक्ष रूप से
- पता
- करें-
- शुरू में
- अभिनव
- निवेश
- अंतर्दृष्टि
- स्थापित
- स्थापित कर रहा है
- उदाहरण
- बजाय
- निर्देश
- एकीकृत
- घालमेल
- एकीकरण
- बातचीत
- दिलचस्प
- इंटरफेस
- आंतरिक
- इंटरनेट
- परिचय कराना
- शुरू की
- द्वारा प्रस्तुत
- शुरू करने
- सहज ज्ञान युक्त
- निवेश
- अलगाव
- मुद्दों
- IT
- जावा
- JIT
- काम
- में शामिल होने
- JSON
- रखना
- बच्चा
- जानना
- भाषा
- बड़ा
- पिछली बार
- विलंब
- ताज़ा
- लीग
- रिसाव
- जानें
- सीख रहा हूँ
- विरासत
- स्तर
- लीवरेज
- पुस्तकालयों
- पुस्तकालय
- लाइन
- LINK
- जुड़ा हुआ
- सूची
- स्थान
- लंबा
- लंबे समय तक
- लंबे समय तक
- लंबे समय तक
- देखिए
- देखा
- देख
- लॉट
- निम्न
- बनाया गया
- बनाए रखना
- का कहना है
- प्रमुख
- बहुमत
- बनाना
- बनाता है
- निर्माण
- बहुत
- नक्शा
- मैप्स
- मैच
- मिलान
- सामग्री
- मैट्रिक्स
- मैक्स
- साधन
- याद
- मेन्यू
- मर्ज
- message
- संदेश
- मेटाडाटा
- तरीका
- तरीकों
- माइक्रोसॉफ्ट
- हो सकता है
- विस्थापित
- प्रवास
- न्यूनतम
- नाबालिग
- लापता
- गलती
- मोड
- आधुनिक
- मॉड्यूल
- मॉड्यूल
- अधिक
- अधिकांश
- चाल
- चलती
- मोज़िला
- विभिन्न
- नामांकित
- यानी
- नामों
- देशी
- नेविगेट करें
- आवश्यक
- आवश्यकता
- की जरूरत है
- नकारात्मक
- जाल
- नया
- नई सुविधाएँ
- समाचार
- न्यूज़लैटर
- अगला
- Next.js
- नोड
- Node.js
- नोड्स
- नोट्स
- ध्यान देने योग्य
- सूचनाएं
- संख्या
- संख्या
- वस्तु
- स्पष्ट
- हुआ
- अक्टूबर
- सरकारी
- आधिकारिक तौर पर
- पुराना
- ONE
- ऑपरेटर
- विकल्प
- ऑप्शंस
- आदेश
- संगठनों
- मौलिक रूप से
- अन्य
- दुकानों
- बाहर
- सिंहावलोकन
- अपना
- पैकेज
- संकुल
- प्राचल
- पैरामीटर
- विशेष रूप से
- भागों
- पारित कर दिया
- पासिंग
- पथ
- निष्पादन
- प्रदर्शन
- प्रदर्शन
- प्रदर्शन
- परिप्रेक्ष्य
- टुकड़ा
- पाइपलाइन
- जगह
- योजनाओं
- प्लेटो
- प्लेटो डेटा इंटेलिजेंस
- प्लेटोडाटा
- लगाना
- बिन्दु
- लोकप्रियता
- स्थिति
- संभव
- पद
- संभावित
- शक्तिशाली
- ठीक - ठीक
- पसंद करते हैं
- उपस्थिति
- वर्तमान
- सुंदर
- को रोकने के
- पूर्वावलोकन
- पिछला
- पहले से
- पूर्व
- शायद
- समस्याओं
- प्रक्रिया
- प्रसंस्करण
- उत्पादन
- रूपरेखा
- कार्यक्रम
- परियोजना
- परियोजनाओं
- होनहार
- उचित
- गुण
- संपत्ति
- प्रदान करना
- बशर्ते
- प्रदान करता है
- प्रतिनिधि
- प्रकाशित
- धक्का
- पहेली
- गुणवत्ता
- त्वरित
- को ऊपर उठाने
- रेंज
- कच्चा
- RE
- प्रतिक्रिया
- पढ़ना
- साकार
- कारण
- कारण
- की सिफारिश
- रिकॉर्ड
- को कम करने
- प्रतिबिंबित
- पंजीकरण
- सम्बंधित
- और
- रिहा
- दूरस्थ
- हटाना
- हटाया
- प्रतिपादन
- बार बार
- प्रतिस्थापित
- रिपोर्ट
- का अनुरोध
- अनुरोधों
- की आवश्यकता होती है
- अपेक्षित
- लचीला
- प्रतिक्रिया
- बाकी
- परिणाम
- परिणाम
- वापसी
- लौटने
- रिटर्न
- छुटकारा
- बाधाओं
- भूमिका
- जड़
- मार्ग
- रूटर
- नियम
- नियम
- रन
- दौड़ना
- सुरक्षित
- वही
- सास
- सहेजें
- परिदृश्यों
- क्षेत्र
- दूसरा
- लगता है
- भावना
- कई
- सेवा
- सत्र
- सेट
- की स्थापना
- व्यवस्था
- छाया
- कम
- चाहिए
- प्रदर्शन
- हस्ताक्षर
- समान
- सरल
- को आसान बनाने में
- के बाद से
- एक
- स्थिति
- आकार
- आकार
- धीरे से
- छोटा
- छोटे
- So
- अब तक
- समाधान
- समाधान ढूंढे
- कुछ
- कुछ
- ध्वनि
- स्रोत
- अंतरिक्ष
- विशिष्ट
- स्थिर
- स्टैंड
- मानक
- मानकों
- प्रारंभ
- शुरुआत में
- स्थिति
- रहना
- कदम
- फिर भी
- रुकें
- की दुकान
- संग्रहित
- कहानी
- स्ट्रेटेजी
- कठोर
- सख्त
- संरचना
- अंदाज
- सदस्यता के
- ऐसा
- सुपर
- समर्थन
- समर्थित
- समर्थन करता है
- आश्चर्य
- स्विच
- प्रणाली
- tailwind
- टेलविंडसीएस
- लेना
- लेता है
- ले जा
- लक्ष्य
- टीम
- टीमों
- टेम्पलेट
- टेम्पलेट्स
- परीक्षण
- परीक्षण
- परीक्षण
- RSI
- स्रोत
- लेकिन हाल ही
- बात
- चीज़ें
- इस वर्ष
- यहाँ
- पहर
- बहुत समय लगेगा
- समय
- बार
- सेवा मेरे
- एक साथ
- टोकन
- टन
- टन
- भी
- साधन
- उपकरण
- शीर्ष स्तर के
- की ओर
- निशान
- ट्रेसिंग
- ट्रैक
- ट्रैकिंग
- बदालना
- संक्रमण
- अनुवाद करें
- पारदर्शी
- ट्रिगर
- <strong>उद्देश्य</strong>
- प्रकार
- टाइपप्रति
- आम तौर पर
- के अंतर्गत
- समझना
- सार्वभौम
- अप्रयुक्त
- आगामी
- अपडेट
- अद्यतन
- अपडेट
- अद्यतन
- उन्नयन
- यूआरएल
- us
- प्रयोग
- उपयोग
- उपयोगकर्ता
- उपयोगकर्ताओं
- उपयोगिताओं
- उपयोगिता
- सत्यापन
- प्रमाणकों
- मूल्यवान
- मूल्य
- मान
- विभिन्न
- Ve
- संस्करण
- देखें
- W3
- प्रतीक्षा
- जरूरत है
- चेतावनी
- वेब
- webpack
- सप्ताह
- सप्ताह
- में आपका स्वागत है
- क्या
- या
- कौन कौन से
- जब
- कौन
- मर्जी
- अंदर
- बिना
- जीत लिया
- अद्भुत
- काम
- काम किया
- काम कर रहे
- होगा
- लिखना
- लिख रहे हैं
- लिखा हुआ
- X
- वर्ष
- आपका
- यूट्यूब
- जेफिरनेट