Angular 22 Features: What’s New, What Breaks, and Should You Upgrade?

Quick Summary

Table of Contents

Introduction

Angular continues to advance frontend development, and Angular 22 raises the development bar. This latest release moves the framework firmly into its signal-first era, giving developers a stable, production-ready set of Angular 22 features built for modern web applications.

Angular has always moved in measured steps, and this version feels more deliberate than incremental. Years of work across signals, zoneless architecture, and developer experience have converged into a release that changes both what Angular offers and how teams build with it.

The Angular team frames v22 around 3 pillars: stronger APIs and templates, a deeper AI agent story, and vibe coding for a wider base of builders. Let’s get into what’s new in Angular v22, what changed, and whether your team should upgrade.

What's New in Angular 22? (Release Overview)

Angular 22 stabilizes Signal Forms and Resources, makes OnPush the default change detection strategy, switches the HTTP client to Fetch, and adds a substantial set of AI tooling for agent-assisted development.

That’s the short version of the Angular 22 features list. The release is more about the framework committing to a signal-first, reactive architecture as the recommended default rather than an opt-in path.

Here are the key takeaway changes before we go deeper:

• Signal Forms and Angular Aria are now stable and production-ready
• resource(), rxResource(), and httpResource() are stable
• OnPush replaces Eager as the default change detection strategy
• The HTTP client uses the Fetch API by default instead of XMLHttpRequest
• A new @Service decorator and an injectAsync() function arrive
• TypeScript 6 is required, and Node 20 support is dropped
• A new wave of AI features, including official Angular agent skills and experimental WebMCP support

Which New Angular 22 Features Matter Most?

The most consequential Angular 22 features are stable Signal Forms, stable Resources, and the new dependency injection helpers, because they change how you write everyday application code. Each of these had been simmering in experimental status, and Angular v22 is where they become safe to build on without fear of breaking changes in the next release.

Signal Forms Reach Stable Status

Signal Forms are no longer experimental, which is arguably the single biggest reason to care about this release. The API picked up genuinely useful additions on the way to stable: minDate() and maxDate() validators for date ranges, a getError() method that pulls a specific validation error without iterating the whole errors object, and a reloadValidation() method that re-runs async validators, much like the old updateValueAndValidity().

You can now debounce a field’s value on blur, and debounce async validators directly inside validateHttp(), so you stop commanding a request on every keystroke. There’s also a compatibility layer so legacy ControlValueAccessor components keep working while you migrate.

Resources Become the Default Way to Handle Async Data

The Resource APIs are stable, and they change the recommended pattern for fetching data in Angular apps. A new chain() method makes it straightforward to make one resource depend on another, propagating loading and error states automatically instead of forcing you to wire that logic by hand. For server-side rendering, resource and rxResource can now be cached with an id, so a value rendered on the server displays immediately on the client without flashing a loading state.

If your team builds data-heavy dashboards or works alongside a Node.js development backend, this is the cleanest async story Angular has added.

The @Service Decorator and injectAsync() Simplify Dependency Injection

Angular v22 introduces its first new decorator in a while. @Service() is shorthand for @Injectable({ providedIn: ‘root’ }), with a clearer name that signals intent, though the service must use the inject function rather than constructor injection. Pair it with the new injectAsync(), which lazy-loads a service only when it’s actually needed, complete with an optional prefetch hook that can warm the bundle while the browser is idle.

For a heavy service like a PDF export utility that only fires after a user action, this keeps it out of the initial bundle without losing dependency injection.

Template and Compiler Improvements Tighten Type Safety

The compiler got smarter about real-world template code, and the template syntax itself expanded. You can now write inline arrow functions directly in templates, use spread syntax, place comments inside HTML elements, and consolidate multiple conditions into a single @switch case.

Optional chaining (?.) behaves the way it does in TypeScript and no longer trips false null errors, and exhaustive @switch checks let @default never trigger a compile-time error when a union type gains a case the template does not handle.

The compiler also catches more problems at build time instead of runtime, including invalid @for loops, elements matched by multiple components, and inputs accidentally bound under the same alias. strictTemplates is now on by default, so strict template type checking is the baseline rather than a setting you remember to enable.

Angular Aria Becomes Stable for Accessible Components

Angular Aria is now stable. The @angular/aria package gives you accessible UI patterns, customizable styling, Signal Forms support, and test harnesses for building components that work across keyboard, mouse, screen readers, and other input methods.

It handles the accessibility behavior teams most often get wrong by hand, including keyboard interaction, focus management, and the correct ARIA roles and states, while you keep full control of markup and styling.

For components like modals, dropdowns, comboboxes, tabs, and menus, you no longer wire ARIA attributes and focus trapping from scratch. For a design system that needs its own visual language without compromising accessibility compliance, this is a cleaner foundation than adopting a styled component library you then have to restyle.

How Does Angular 22 Harden Security?

Angular 22 is also a serious security release, and most of the fixes apply automatically. The platform-server package guards against server-side request forgery (SSRF) and path hijacking, rejects suspicious and protocol-relative URLs, and closes SSRF bypasses through backslash URLs in HttpClient. Sanitization is stricter across dynamic href and xlink:href bindings on SVG anchors, meta selectors, and placeholder values.

One default change deserves a deliberate check: the HTTP transfer cache now skips cookie-bearing and withCredentials requests, so authenticated, user-specific responses no longer leak into transferred server-side state. If you cache credentialed responses during Angular universal, review that before you implement it.

How Is Angular 22 Different From Angular 21?

The core difference is that Angular 22 turns v21’s experiments into stable, on-by-default behavior. Where Angular 21 made zoneless change detection the default for new projects and introduced Signal Forms as experimental and Angular Aria as a developer preview, v22 stabilizes those APIs, flips the change detection and HTTP defaults, and raises the toolchain floor. Here’s the side-by-side.

The takeaway: most of what you read about in the v21 release notes as “coming” or “try this” is now the recommended path in v22. If you also run React projects alongside Angular, the signal-first direction will feel familiar. That’s good for long-term stability and a slight hurdle for upgrade day, which is what the next section is about.

What Breaks When You Upgrade to Angular 22?

Most breaking changes have an automatic migration, but a few of them are yet to be planned around. The Angular CLI’s ng update handles the bulk of the churn, but various changes require manual attention or a conscious decision to keep old behavior.

How Do You Upgrade to Angular 22 Step by Step?

Upgrade your environment first, then run the CLI migration, then test the risk areas. The order matters because the toolchain requirements are now stricter.

• Update Node to a supported version (22 or 26) and TypeScript to version 6.
• Run ng update @angular/core @angular/cli and let the automatic migrations apply.
• Review any code the migration wrapped or flagged, especially optional chaining and routing.
• Decide whether to keep paramsInheritanceStrategy: ’emptyOnly’ or accept the new default.
• If you are moving off Karma, run migrate-karma-to-vitest followed by refactor-jasmine-vitest to convert tests.
• Run your full test suite and manually QA routing, forms, and any SSR pages.

For large enterprise codebases, a dual test setup works well: keep the old Karma tests running while you migrate to Vitest file by file. If your team is short on bandwidth for a migration of this size, you can take Angular upgrade service support, or a dedicated developer team can implement the upgrade without stalling your roadmap.

What AI and Agentic Features Does Angular 22 Add?

Angular 22 is the release where the framework’s AI story moves to the center, and the team organized it around making Angular easy for both developers and AI agents to work with. There are four pieces worth knowing.

• Agent Skills: The Angular team can publish a set of skills you install with npx skills add, giving coding assistants up-to-date guidance for generating correct Angular code and architecture.
• Updated MCP server tools and Chrome DevTools integration: An app running in development exposes its signal graph and dependency injection graph, so an agent connected through MCP can inspect application state and suggest fixes.
• Experimental WebMCP support: A new declareExperimentalWebMcpTool() function lets your app expose capabilities directly to an in-browser agent, and if you use Signal Forms, you can auto-register a form as an agent-callable tool with provideExperimentalWebMcpForms(). Pair route-scoped tools with automatic injector cleanup so they unregister when the user leaves the route.

What is Angular's Vibe Coding Story in v22?

Vibe coding is one of the 3 pillars Angular built this release around. The goal is to make Angular a friendly foundation for AI-assisted and AI-generated app building, so teams can move from idea to working UI faster while still landing on a stable, maintainable framework. The concrete pieces are Google AI Studio and Gemini Canvas integration, which let you generate and iterate on Angular applications inside Google’s AI tooling, alongside the Agent Skills and MCP work above.

Should You Upgrade to Angular 22 Now or Wait?

You should upgrade now if you’re on Angular v20 or later and want stable Signal Forms and Resources, but consider waiting if your codebase leans heavily on Zone.js tests or constructor injection patterns; then your app is not ready to refactor. The release is stable where it counts, and each major version gets 18 months of active support, so staying current keeps you inside the support window.

The case for upgrading now: Signal Forms and Resources are production-ready, the new defaults match modern best practices, and most breaking changes have automatic migrations. The case for waiting: The genuinely new pieces like debounced() signals and the entire WebMCP layer are still experimental, and if you have a sprawling Karma test suite or deep ControlValueAccessor usage, the migration effort is real.

A reasonable middle path is to upgrade the framework now to stay supported, adopt the stable APIs deliberately over the next few sprints, and leave the experimental AI features for a prototype branch.

What's Coming After Angular 22?

The Angular team has confirmed a @boundary template block is in progress, designed to catch errors in a template and render fallback UI instead of breaking the whole page. It may land in v22.1 or v23.

Beyond that, expect WebMCP to mature past its experimental flag and continue work toward selectorless components, which let you import components into templates without string selectors and reduce naming conflicts.

Iteration also continues on the build optimizer, where the Rust-based Rolldown remains an experimental alternative to Rollup, and on the router’s experimental Navigation API support. The trajectory is steady and predictable, which, for a framework running enterprise applications, is exactly the point.

Conclusion

Frequently Asked Questions (FAQs)

Is Angular 22 backward compatible with Angular 21?

Mostly. Most changes launched with automatic migrations, but router parameter inheritance and optional chaining semantics need manual review.

Does Angular v22 still require Zone.js?

No. Zoneless change detection has been the default for new projects since v21, though Zone.js is still supported for existing apps.

What TypeScript version does Angular 22 need?

TypeScript 6. Older versions, including 5.9, are no longer supported, so update your toolchain before upgrading.

Is Signal Forms production-ready in Angular 22?

Yes. Signal Forms graduated from experimental to stable in v22 and are safe to use in production.

Can you skip from Angular 20 directly to Angular 22?

Angular recommends upgrading one major version at a time, so move from 20 to 21 to 22 using ng update at each step.

Is Angular Aria stable in Angular 22?

Yes, Angular Aria graduated from developer preview to stable in v22, with accessible patterns, custom styling, Signal Forms support, and test harnesses.

When does Angular v22 reach the end of life?

Each major Angular version receives 18 months of active support, after which it stops receiving updates.