Angular 22 is not just another routine framework update.
Released on June 3, 2026, Angular 22 continues Angular’s move toward signals, zoneless applications, better performance defaults, modern build tooling, stronger accessibility, and AI-assisted web experiences. Angular 22 is currently in active support, with long-term support planned through June 2028.
For development teams, some changes are immediately useful. Others affect how existing Angular applications should be upgraded.
Here are 13 important Angular 22 features and changes developers should know about.
Quick Look at What Changed in Angular 22
Let's look at each change in more detail.
1. Signal Forms Are Now Stable
Forms have always been one of the more complex areas of Angular.
Developers have traditionally chosen between:
- Template-driven forms
- Reactive Forms
- Custom form-state solutions
Angular 22 officially stabilises Signal Forms.
Signal Forms use Angular Signals as the source of truth for form data. They provide automatic synchronisation, type-safe field access, and schema-based validation. Angular also provides compatibility support for teams gradually moving from existing Reactive Forms.
A simple example looks like this:
import { signal } from '@angular/core';
import {
form,
FormField,
required
} from '@angular/forms/signals';
const userModel = signal({
name: '',
email: ''
});
const userForm = form(userModel, (fields) => {
required(fields.name);
required(fields.email);
});
And in the template:
<input [formField]="userForm.name"> <input [formField]="userForm.email">
The main benefit is that form state becomes part of Angular's signal-based reactive model.
For new applications already using signals heavily, Signal Forms can reduce the amount of state-management code required around forms.
Existing reactive forms do not need to be rewritten immediately.
Angular provides compatibility APIs that allow gradual migration instead of forcing teams into a complete rewrite.
2. The Resource API Is Stable
Loading asynchronous data usually requires developers to manage several states:
Loading.
Success.
Failure.
Refresh.
Cancellation.
Angular's Resource API gives developers a signal-based way to represent asynchronous data.
In Angular 22, rxResource() and httpResource() are stable APIs.
A simple httpResource() example:
import { httpResource } from '@angular/common/http';
user = httpResource(() => `/api/users/${this.userId()}`);
The resource exposes useful reactive states such as:
user.value() user.isLoading() user.error() user.status()
This means developers no longer need to create separate signals or variables for every part of a typical data-loading workflow.
httpResource() also works with Angular's existing HttpClient, including interceptors and testing APIs.
One important point: Resources are primarily intended for reading data. Normal application APIs HttpClient are still more appropriate for mutations such as creating or updating records.
3. Angular Aria Is Now Stable
Accessibility is easy to underestimate.
A dropdown might look simple until you need to support:
Keyboard navigation.
Focus management.
Screen readers.
Correct ARIA attributes.
Selection behaviour.
Angular 22 makes Angular Aria stable.
@angular/aria provides headless directives implementing common WAI-ARIA interaction patterns while leaving the HTML structure and visual styling in the developer's control.
This means your team can build a custom design system without reimplementing all accessibility behaviour from scratch.
Angular Aria can help with UI patterns such as:
- Tabs
- Menus
- Accordions
- Comboboxes
- Listboxes
- Trees
- Toolbars
For enterprise products with custom component libraries, this is one of the more practical Angular 22 improvements.
4. Angular Introduces the New @Service() Decorator
For years, Angular services commonly looked like this:
@Injectable({
providedIn: 'root'
})
export class UserService {}
Angular 22 introduces a simpler option:
import { Service } from '@angular/core';
@Service()
export class UserService {}
@Service() is designed as a cleaner shorthand for a globally available, tree-shakable service. Angular's current documentation now uses it throughout its service examples.
Services created with @Service() are available from the root injector by default.
There is one important difference.
@Service() is designed around Angular's modern inject() API rather than constructor-based dependency injection.
For example:
@Service()
export class OrderService {
private http = inject(HttpClient);
}
@Injectable() has not disappeared. It remains useful when you need more specialised dependency-injection configuration or constructor injection.
5. OnPush Is Now the Default Change Detection Strategy
This is one of the most important behavioural changes in Angular 22.
Previously, components used Angular's eager change detection unless developers explicitly selected ChangeDetectionStrategy.OnPush.
Angular 22 changes that.
OnPush is now the default.
The previous ChangeDetectionStrategy.Default name has also effectively been replaced by ChangeDetectionStrategy.Eager; Default remains as a deprecated alias.
Before:
@Component({
selector: 'app-user',
changeDetection: ChangeDetectionStrategy.OnPush
})
In Angular 22, you can normally just write:
@Component({
selector: 'app-user'
})
and receive OnPush behaviour.
Why does this matter?
Angular can avoid unnecessary component checks, particularly in applications built around Signals and zoneless change detection.
Existing applications should still be tested carefully.
If older components depend on direct property mutation or subscriptions without notifying Angular that the UI needs updating, developers may need to refactor those patterns.
Angular's migration tooling helps preserve existing behaviour during upgrades by marking components that still depend on eager change detection.
6. HttpClient Uses Fetch by Default
Angular's HttpClient traditionally relied on XMLHttpRequest.
Angular 22 moves to the modern Fetch API as the default HTTP backend.
In most applications, developers do not need to change how they write requests:
http.get('/api/customers');
The implementation underneath now uses Fetch.
This makes Angular's HTTP layer better aligned with modern browsers and server-side JavaScript environments.
It is particularly useful for SSR applications.
There is one important difference to remember.
Fetch does not offer the same upload-progress behaviour as XHR.
If your application tracks file upload progress, you can explicitly switch back to the XHR backend:
provideHttpClient(withXhr())
Angular provides withXhr() specifically for this case.
7. Incremental Hydration Is Enabled by Default
Server-side rendering improves initial page delivery, but the browser still needs to make that rendered HTML interactive.
That process is called hydration.
Angular's incremental hydration allows parts of an application to remain dehydrated until they are actually needed.
With Angular 22, incremental hydration becomes the default when using:
provideClientHydration()
Previously, it had to be enabled explicitly.
Angular's documentation confirms that it withIncrementalHydration() is deprecated in v22 because incremental hydration is now automatically enabled.
This can help reduce initial JavaScript work for server-rendered applications and works especially well with Angular's @defer features.
If an application specifically requires the older behaviour, Angular provides:
provideClientHydration( withNoIncrementalHydration() )
8. Angular Adds Native Debounced Signals
Search boxes are a classic example of debouncing.
You do not want to send an API request every time somebody types another character.
Traditionally, Angular developers often used RxJS:
debounceTime(300)
Angular 22 introduces an experimental signal-native API called debounced().
For example:
query = signal('');
debouncedQuery = debounced(
this.query,
300
);
You can then use the settled value when loading search results.
This allows signal-first applications to implement common debounce behaviour without converting back and forth between Signals and Observables.
It is important to note that it debounced() is currently marked experimental, so its API may still change.
Signal Forms also include a stable debounce() rule for controlling how quickly form-field updates are applied.
9. injectAsync() Brings Lazy Loading to Dependency Injection
Sometimes a service has a heavy dependency.
Maybe it uses:
A PDF engine.
A charting library.
A Markdown parser.
A specialised editor.
Loading that code during initial startup may increase the JavaScript bundle even though most users never use the feature.
Angular 22 introduces injectAsync() for lazily loading injectable services.
Example:
markdownService = injectAsync(
() => import('./markdown.service')
.then(m => m.MarkdownService)
);
Then:
async showPreview() {
const service = await this.markdownService();
service.render();
}
The dependency does not have to be part of the initial application bundle.
Angular can load it when required.
You can also define a prefetch strategy so that a dependency loads during idle time before the user actually needs it.
This can be useful for keeping large enterprise applications lean without manually building custom lazy-service infrastructure.
10. Angular 22 Introduces Experimental WebMCP Support
One of the most forward-looking Angular 22 features is WebMCP.
Web Model Context Protocol allows full-stack web applications to expose structured tools that AI agents running in the browser can discover and use.
Instead of an AI agent trying to understand a page by scraping the DOM and simulating clicks, an application can expose an explicit action such as:
searchCatalog createCustomer submitOrder generateReport
Angular now provides experimental APIs for registering WebMCP tools at application, route and service levels.
Angular can even expose Signal Forms as agent-accessible WebMCP tools.
That means a form already containing fields, validation and submission behaviour can potentially become a structured interface for an AI browser agent.
This is still experimental.
Angular warns that WebMCP itself is an emerging standard and that APIs may change even outside major framework releases.
Still, the direction is interesting.
Angular applications are being prepared not only for human users but also for AI agents that may interact with websites through structured actions.
11. Strict Template Type Checking Is Now the Default
Angular's template compiler can catch errors that TypeScript alone cannot see.
For example:
<user-card [age]="user.name">
If it age expects a number but user.name is a string, strict template checking can catch the problem during development.
In Angular 22, strictTemplates defaults to true.
Strict template checking can validate areas such as:
- Component inputs
- Nullability
- Event types
- Template references
- Directive generic types
- DOM event values
This helps move errors from runtime into the build process.
For new applications, stronger template checking therefore requires less manual configuration.
Existing applications upgrading from less strict configurations may reveal template type problems that previously went unnoticed.
That is usually a good thing—but it means teams should include template compilation in their upgrade testing.
12. Webpack-Based Builders Are Deprecated
Angular's build system has been moving toward esbuild and Vite for several versions.
Angular 22 makes the direction clearer.
The older Webpack-based browser build system is now deprecated. Angular recommends migrating applications to its newer application build system.
The modern build system provides:
- Faster builds
- Faster rebuilds
- ESM output
- esbuild-based bundling
- Vite-powered development workflows
- Integrated SSR
- Prerendering support
- Improved stylesheet hot replacement
New applications already use the modern application builder.
Existing projects using the old Webpack builder can continue running for now, but teams should begin planning migration.
Angular provides migration tooling rather than requiring developers to manually rewrite the complete angular.json configuration.
For larger enterprise applications with custom Webpack plugins, this change deserves particular attention before upgrading.
13. Comments Inside Angular Element Tags
This change is much smaller than Signal Forms or OnPush, but it can make complex templates easier to work with.
Angular 22 supports TypeScript-style comments inside an element's opening tag.
For example:
<app-product-card // Main product passed from search [product]="product" /* Trigger analytics after selection */ (selected)="trackSelection($event)" />
Both // style comments can be used in these locations in Angular 22.
Previously, adding explanations between several inputs or temporarily commenting around bindings was more awkward.
This feature can be particularly useful in large components where one element contains many:
Inputs.
Outputs.
ARIA settings.
Template references.
Directives.
Sometimes small developer-experience improvements save more time than they appear to.
What Angular 22 Tells Us About Angular's Direction
Looking at these 13 changes together, Angular's direction is becoming much clearer.
Angular Is Becoming Signal-First
Signal Forms.
Resources.
Debounced signals.
OnPush by default.
All of these changes strengthen the role of Signals as Angular's primary reactivity model.
RxJS is still important and is not disappearing. Angular even provides rxResource() specifically for Observable-based workflows.
But developers can now build much more of an application using Signals without constantly switching reactive models.
Performance Defaults Are Becoming Smarter
Developers previously had to know which optimisations to enable.
Angular 22 increasingly enables sensible defaults automatically.
Examples include:
OnPush change detection.
Fetch-based HTTP.
Incremental hydration.
Modern build tooling.
Instead of performance being an optional advanced configuration, Angular is trying to make better performance the default behaviour.
Angular Is Preparing for AI-Native Web Applications
WebMCP is particularly interesting.
Angular already has an MCP server for developer tooling, and Angular 22's experimental WebMCP APIs move AI integration into the application itself. Angular describes WebMCP as a way for web apps to expose structured capabilities directly to AI agents rather than forcing them to rely on DOM interaction.
It is early technology.
But it gives us a glimpse of a web where applications are designed for two kinds of users:
Humans interacting through interfaces.
AI agents interacting through structured tools.
Should You Upgrade to Angular 22?
For most actively maintained Angular applications, Angular 22 is worth evaluating.
The release is currently under active support, and Angular lists v22 as supported through active and LTS periods ending in 2028.
Before upgrading a production application, pay particular attention to:
Change detection
Check components that depend on eager updates.
HTTP uploads
Applications using upload progress may need it.
Webpack customisations
Review anything tied to the deprecated browser builder.
Strict templates
Expect previously hidden template type errors to surface.
SSR and hydration
Review hydration behaviour because incremental hydration is now enabled by default.
Angular 22.0 also requires TypeScript 6.0.x and supported Node.js versions beginning with Node 22.22.3, Node 24.15, or Node 26 depending on the release line. Check Angular's compatibility table before updating your build environment.
A normal upgrade should begin with Angular's official update tooling rather than manually changing package versions.
ng update @angular/core @angular/cli
Angular recommends using its Update Guide and migration schematics when moving between supported major versions.
Which Angular 22 Features Matter Most?
If you are starting a new Angular application, I would pay the most attention to:
Signal forms for modern form development.
Resource API for asynchronous data.
OnPush by default for cleaner reactive architecture.
Angular Aria for accessibility.
@Service() and injectAsync() for modern dependency injection.
If you maintain a large existing application, the highest-priority changes are different:
OnPush default behaviour.
Webpack builder deprecation.
Fetch becoming the HttpClient default.
Strict template checking.
Incremental hydration changes for SSR applications.
These areas are more likely to affect upgrade behaviour than the smaller developer-experience improvements.
Frequently Asked Questions About Angular 22
When was Angular 22 released?
Angular 22 was released on June 3, 2026. It is currently under active support.
Are Signal Forms stable in Angular 22?
Yes. Signal Forms became stable with Angular 22, and Angular now documents them alongside Reactive Forms and template-driven forms.
Is OnPush the default in Angular 22?
Yes. Components are now used ChangeDetectionStrategy.OnPush by default. The previous eager strategy is available as ChangeDetectionStrategy.Eager.
Does Angular 22 still use RxJS?
Yes. RxJS remains supported. Angular also provides rxResource() for integrating Observable-based asynchronous data with the Resource API.
Does Angular 22 use Fetch?
Yes. Angular's HttpClient now uses Fetch by default. Applications needing XHR-specific behaviour can opt into withXhr().
Is WebMCP stable?
No. Angular's WebMCP support is currently experimental and may change as the emerging WebMCP standard develops.
Is Webpack removed from Angular 22?
No. The old Webpack-based browser build system is deprecated, not immediately removed. Existing applications can continue using it temporarily, but Angular recommends migrating to the newer build system.
Which TypeScript version does Angular 22 support?
Angular 22.0.x supports TypeScript 6.0.x, specifically versions.
Final Thoughts
Angular 22 feels less like a release built around one headline feature and more like a release that brings several years of Angular modernisation together.
Signals are no longer an optional idea sitting beside the framework.
They now influence forms, asynchronous data, change detection and everyday application architecture.
At the same time, Angular is modernising everything around that core:
Fetch for HTTP.
Incremental hydration for SSR.
Modern build tooling.
Accessibility primitives.
Lazy dependency injection.
And experimental AI-agent integration through WebMCP.
For new projects, Angular 22 provides cleaner defaults.
For existing projects, the upgrade deserves careful testing—particularly around change detection, HTTP behaviour, build tooling and SSR.
But the overall direction is clear:
Angular is becoming more reactive, more performance-focused, less dependent on legacy browser patterns, and increasingly ready for AI-assisted applications.
