Angular v22 की घोषणा

 (blog.angular.dev)
2 पॉइंट द्वारा GN⁺ 4 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Angular v22 ने AI एजेंट workflows को Angular MCP के development server control tools, Angular Agent Skills, experimental WebMCP, और Google AI Studio·Gemini Canvas के Angular generation workflows तक विस्तार दिया है
  • स्थिरता और developer convenience को बेहतर बनाने के लिए Signal Forms, Angular Aria, resource·httpResource को experimental/preview चरण से production-ready स्थिति में लाया गया है
  • Signal Forms एक declarative form API है, जो Reactive Forms·strongly typed forms·template-based forms·signals reactivity को जोड़ती है, और इसमें documentation enhancements, community feedback reflection, तथा Angular Material और Angular Aria support पूरा किया गया है
  • API और template improvements में Router का Navigation API integration, route resource cleanup control, @Service और injectAsync, HTML element comments·spread/rest·@switch checks·template arrow function support शामिल हैं
  • Angular v22 नए apps के लिए OnPush default, ChangeDetectionStrategy.Eager naming change, 2026 की तीसरी तिमाही में @boundary developer preview, और Webpack family support deprecation के साथ TSGo focus द्वारा future foundation को मजबूत करता है

Production-ready बनी सुविधाएँ

  • Signal Forms एक reactive·composable·declarative form API है, जो Reactive Forms की खूबियाँ, strongly typed forms, template-based forms के पसंदीदा तत्व, और signals की reactivity को जोड़ती है
  • v21 release के बाद angular.dev forms guide को अपडेट किया गया, community feedback और issues को शामिल किया गया, और Angular Material तथा Angular Aria integration को support दिया गया
  • Angular Aria accessibility primitives का एक सेट है, जिसे इस तरह डिज़ाइन किया गया है कि developers styling और business logic संभालें, जबकि UI directives और patterns accessibility को संभालें; v22 में यह production use के लिए उपलब्ध हो गया है
  • Angular Aria के 12 UI patterns common accessibility patterns को कवर करते हैं, साथ ही API stabilization, Signal Forms का पूर्ण support, और testing harnesses भी देते हैं
  • Asynchronous reactive APIs में resource asynchronous resources को signal-style usability के साथ संभालता है, और httpResource HTTP data fetching को अधिक declarative model में संभालता है
  • resource और httpResource अब v22 में production apps में इस्तेमाल किए जा सकते हैं, और इनके उपयोग की जानकारी official guide में उपलब्ध है

AI development और agent workflows

  • Angular v22 ने AI-native applications के लिए workflows को तीन क्षेत्रों तक विस्तारित किया है: code authoring agent tools, browser agent tools, और AI development platforms
  • Angular MCP का devserver.wait_for_build agents को application build करने, output results की समीक्षा करने, और अगला कदम तय करने में मदद करता है; build log में code errors के आधार पर self-healing loops भी बनाए जा सकते हैं
  • devserver.start और devserver.stop development server को शुरू और बंद करते हैं, और ये tools testing तथा end-to-end tools के साथ v22 में stable हो गए हैं
  • Angular MCP ai_tutor, modernize, onpush_zoneless_migration जैसे tools की सूची बढ़ा रहा है, जो modern Angular app development में मदद करते हैं
  • Angular Agent Skills का angular-developer model को modern Angular development guidance देता है, जिसमें Angular Aria और Signal Forms जैसी नई सुविधाएँ शामिल हैं; इसकी file 140 lines से कम है और यह progressive disclosure approach का उपयोग करती है, जिसमें ज़रूरत पड़ने पर code samples और reference files लाए जाते हैं
  • angular-new-app agent environments में Angular को पहली बार देखने वाले users को local Angular coding environment सेट up करने में मार्गदर्शन देता है; ये skills Antigravity जैसे AI development tools या agent workflow environments में उपयोग किए जा सकते हैं
  • Contributor Skills Angular codebase के भीतर features विकसित करने के लिए ज़रूरी mental model समझने में मदद करती हैं, और पहला pull request तैयार करने वालों से लेकर experienced team members तक सभी के लिए उपयोगी हैं
  • experimental WebMCP browser के भीतर agents के उपयोग के लिए structured tools बनाने और expose करने देता है, जिससे DOM interactions की ज़रूरत कम होती है; यह full app·routes·services tool definitions और dynamic Signal Forms-based auto tool generation को support करता है
  • WebMCP integration documentation angular.dev/ai/webmcp पर उपलब्ध है
  • Google AI Studio और Gemini Canvas उन builders को Angular-based projects शुरू करने में मदद करते हैं जिनकी traditional coding background नहीं है; Gemini web app के built-in coding sandbox में browser के भीतर पूरी application बनाई जा सकती है
  • Gemini workflow में prompt में “Angular” लिखने पर Angular app generate हो जाती है, और generation के बाद browser में manually edit करना, AI के साथ आगे बातचीत कर उसे refine करना, या Firebase integration माँगना संभव है
  • Google AI Studio में configuration panel से Angular चुनकर समान workflow इस्तेमाल किया जा सकता है, और generation के बाद chat के ज़रिए features जोड़कर deployment तक पहुँचा जा सकता है

Router और dependency injection APIs

  • Navigation API integration Router को browser-native Navigation API के साथ align करता है, जिससे कम boilerplate में app navigation control मिलता है
  • Router RouterLink और standard anchor tags सहित सभी navigation requests को automatically intercept कर सकता है
  • यह native scroll behavior का उपयोग करके back/forward navigation के दौरान users को अपेक्षित स्थिति तक पहुँचाता है, बिना custom scroll-management logic के और बिना bundle size पर असर डाले
  • browser-native navigation lifecycle से सीधे जुड़कर page transitions के दौरान global loading indicators और सही accessibility announcements को संभालना आसान हो जाता है
  • Route cleanup control withExperimentalAutoCleanupInjectors और destroyDetachedRouteHandle के ज़रिए memory management को अधिक स्पष्ट रूप से संभालता है
  • withExperimentalAutoCleanupInjectors अब active न रहने वाले routes से जुड़े dependency injectors को automatically destroy करता है, जिससे idle route-level providers और resources साफ़ हो जाते हैं
  • destroyDetachedRouteHandle custom RouteReuseStrategy इस्तेमाल करते समय detached route handle के भीतर components को साफ़ तरीके से destroy करने के लिए एक official public API है
  • @Service decorator अधिकतर use cases में @Injectable({ providedIn: 'root' }) pattern की जगह लेता है, जबकि deeper configuration या constructor injection की ज़रूरत होने पर @Injectable का उपयोग जारी रखा जा सकता है
  • injectAsync services के asynchronous dependency injection को support करता है, जिससे code splitting और on-demand loading संभव होता है; service का auto-provided होना ज़रूरी है और @Service इसे संभालता है
  • injectAsync के उदाहरण में ReportExporter service पहली बार उपयोग होने तक load नहीं होती, और prefetch: onIdle जैसी prefetch configuration भी संभव है
  • इसके उपयोग की जानकारी injectAsync official documentation में उपलब्ध है
  • अन्य सुधारों में TypeScript 6 के साथ पूर्ण compatibility और template pipeline तथा runtime efficiency में performance improvements शामिल हैं

Template authoring experience और change detection

  • HTML elements के भीतर property और binding स्तर पर comments इस्तेमाल किए जा सकते हैं, जिससे template readability और clarity बेहतर होती है; VS Code comment toggling भी supported है
  • Angular एक ही element पर कई बार match होने वाले host directives को automatically de-duplicate करता है
  • अगर कोई directive template और host directive दोनों में match हो, तो template match को प्राथमिकता मिलती है, और host directive की input/output maps merge की जाती हैं
  • यदि कोई input या output कई नामों से expose किया जाता है, तो Angular naming conflicts रोकने के लिए error देता है
  • templates में spread/rest syntax का उपयोग किया जा सकता है, और यह object literals, array literals, तथा function calls पर लागू होता है
  • @switch में कई @case एक ही output share कर सकते हैं, जिससे code duplication कम होता है
  • union type वाले @switch block में @default never; का उपयोग करने पर unhandled values होने पर compile-time error मिल सकता है
  • template के भीतर inline functions को arrow function के रूप में इस्तेमाल किया जा सकता है; ये छोटे और सरल functions के लिए उपयुक्त हैं, जबकि complex या लंबे समय तक चलने वाले functions को template में नहीं रखना चाहिए
  • नए applications में OnPush default change detection strategy है, जो zoneless defaults और performance by default लक्ष्य के अनुरूप है
  • पहले का default ChangeDetectionStrategy.Default अब ChangeDetectionStrategy.Eager नाम से जाना जाएगा, जिससे change detection cycle में उसके behavior को अधिक स्पष्ट रूप से समझाया जा सके

Error boundaries, deprecations, और आगे की दिशा

  • @boundary Angular templates के भीतर error boundary लागू करने के लिए एक नया API है, जो wrapped code blocks से उठने वाले errors को catch कर सकता है और fallback content निर्दिष्ट करने देता है
  • इसका उद्देश्य e-commerce checkout जैसे high-stakes flows में किसी एक component की failure से पूरे page के टूट जाने की समस्या को कम करना है
  • @boundary को 2026 की तीसरी तिमाही में developer preview के रूप में उपलब्ध कराया जाएगा
  • Webpack support, @angular-devkit/build-angular builders, और @ngtools/webpack जैसी चीजें v22 में deprecated हो गई हैं
  • Angular अब application builder के TSGo support पर फोकस कर रहा है, और अधिक deprecation जानकारी Angular CHANGELOG में देखी जा सकती है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 4 시간 전
Hacker News की राय

  • मैं Angular v21 से एक काफ़ी जटिल ऐप बना रहा हूँ, और components, state, तथा data flow को बनाने और संभालने का cognitive load कम होने से अनुभव बहुत अच्छा रहा है
    signals और signal store की वजह से यह बहुत आसान हो गया, और यह सब मैंने AI coding tools के बिना हाथ से लिखा

  • अब मुझे मानना पड़ रहा है कि आजकल Angular इस्तेमाल करने में सचमुच मज़ा आता है
    ecosystem थोड़ा खुरदुरा है, यह अफ़सोस की बात है, लेकिन अच्छी बात यह है कि built-in features बहुत ज़्यादा हैं

    • मेरा अनुभव भी ऐसा ही रहा
      काश Angular अपना tsc से मज़बूती से जुड़ा हुआ अजीब compiler छोड़कर, किसी भी TypeScript compiler के साथ काम करने वाला ज़्यादा pluggable approach अपनाए
      apps और unit tests का cold build time अब भी खास अच्छा नहीं है, लेकिन coding agents इस्तेमाल करने पर यह बोझ थोड़ा कम महसूस होता है
    • ecosystem में क्या खुरदुरा है, यह जानने की जिज्ञासा है
      मुझे packages ढूँढने में कभी दिक्कत नहीं हुई, और ज़्यादातर packages भी signal flow को अच्छी तरह follow कर रहे हैं
    • जिज्ञासा है कि क्या projects अब भी RxJS जैसी चीज़ें चुन रहे हैं, जिससे code परत-दर-परत जमा होता जाता है और debugging दर्दनाक हो जाती है
      या अब Angular ecosystem में भी कुछ समझदारी लौट आई है

  • मैंने हाल ही में एक काफ़ी जटिल Angular project को v14 से v21 तक upgrade किया
    कुछ वर्षों से Angular development धीमा लग रहा था, लेकिन उन versions के बीच हुए बदलावों को एक साथ देखने पर यह लगभग पूरी तरह नया framework लगता है

  • Angular Aria वाकई बहुत अच्छा लग रहा है
    autocomplete जैसे जटिल scenarios तक के लिए documentation अच्छी तरह मौजूद है, इसलिए मैं जल्दी इसे आज़माना चाहता हूँ कि क्या यह उस screen-reader autocomplete की जगह ले सकता है जिसे पहले मुझे खुद बनाना पड़ता था

    • शायद मैंने कुछ ग़लत देखा हो, लेकिन https://angular.dev/guide/aria/overview#showcase पर keyboard interaction आज़माने पर यह ज़्यादा आम tab/shift+tab की जगह arrow keys से navigate कराता है
      यहाँ तक कि उसी example के ठीक ऊपर इसके अपने documentation tabs focus movement के लिए tab/shift+tab का इस्तेमाल कर रहे हैं

  • मैं इस feature को लेकर सच में उत्साहित हूँ
    experimental feature रहने के समय से ही मैं signal-forms और resources इस्तेमाल करना चाहता था, और signals पर आने के बाद अब पीछे लौटना संभव नहीं लगा
    forms की वजह से RxJS इस्तेमाल करना बहुत बड़ी तकलीफ़ थी

    • क्या आप signals के बारे में थोड़ा और समझा सकते हैं
      क्या यह Godot जैसे game engine के signal paradigm की तरह है, जहाँ components depth की परवाह किए बिना signals emit करते हैं और दूसरे components subscribe करते हैं, या यह पूरी तरह अलग चीज़ है

  • React से पहले मैं Angular का मज़े से इस्तेमाल करता था और वह काफ़ी अच्छा दौर था, लेकिन सच कहूँ तो अब मैं लगभग भूल ही चुका हूँ कि Angular नाम की भी कोई चीज़ है
    मैं React की तारीफ़ नहीं कर रहा, बल्कि आजकल मुझे htmx style ज़्यादा पसंद है
    लेकिन अब लगता है कि प्रतिस्पर्धा इस ओर खिसक गई है कि agents किस framework या language को बेहतर संभालते हैं, और static analysis या compiler-level tools ग़लतियों को कितनी अच्छी तरह पकड़ सकते हैं

  • Angular मुझे थोड़ा Django जैसा महसूस होता है, इसलिए अच्छा लगता है
    जो कुछ चाहिए वह सब शामिल होता है, इसलिए इस्तेमाल करना आसान है

    • मुझे लगता है कि फिर सीधे Django ही इस्तेमाल करना चाहिए
      या फिर templates और server-side rendering वाला कोई तेज़ backend इस्तेमाल करके, उसके साथ htmx जोड़ दें, तो टूटी-फूटी JS ecosystem की पागलपन के बिना भी single-page app जैसा अनुभव मिल सकता है

  • Angular की वजह से मेरा programming career आनंददायक रहा, और कभी काम जैसा नहीं लगा
    अपनी पसंद की language में काम करना, और ज़्यादा सीखना, और उसके लिए पैसे मिलना — इससे बेहतर क्या होगा

  • मैंने काफ़ी समय से Angular इस्तेमाल नहीं किया
    Vue, React, Svelte जैसे दूसरे JavaScript frameworks इस्तेमाल करने वाले के तौर पर जिज्ञासा है कि मैं क्या मिस कर रहा हूँ
    दूसरे बड़े frameworks के बजाय Angular चुनने वाले लोगों की वजह क्या है

    • आम तौर पर मुझे लगता है कि Angular पुराने ढंग के applications को websites के रूप में बनाना हो तब सबसे ज़्यादा फिट बैठता है
      खासकर जब आपको JavaScript और web development ज़्यादा पसंद न हो, और backend को ही मुख्य हिस्सा मानते हों

  • import {signal} from "@angular/core" और import {form} from "@angular/forms/signals" की तरह, संरचना ऐसी है कि signal core से आता है और form forms/signals से
    लगता है इसके पीछे कोई terminology वाला कारण है जो मैं नहीं समझ पाया
    इसके अलावा, 10 साल बाद Angular को फिर से इस्तेमाल करने का ख़याल रोमांचक है, और यह काफ़ी अच्छा दिख रहा है

    • signals Angular की मूल data structure हैं, इसलिए वे core में हैं
      signal-based forms Forms module का हिस्सा हैं, इसलिए अगर आप forms का इस्तेमाल नहीं करते तो उसका overhead साथ नहीं आता
    • Angular में forms संभालने के कई तरीके हैं
      शायद यह नए signal-based forms को लाने वाला import है