Angular v22: Stable Signal Forms, Async Reactivity and AI Agent Support

Angular v22 is less about one headline feature and more about maturity. Several APIs that spent the last releases in experimental or developer preview status are now considered production ready, dependency injection and templates get noticeably less verbose, and the framework leans into a new audience: AI coding agents that write and run Angular apps. Below is a tour of the changes that matter most, grouped by how they affect everyday work rather than by release-note order.

Three APIs Graduate to Stable

Angular typically ships big features as experimental first, collects feedback, then stabilizes them. In v22, three of them complete that journey.

Signal Forms

Signal Forms combine the flexibility of reactive forms, the type safety of typed forms and the approachability of template-driven forms, all modeled on signals. Since their introduction in v21, they have been tested by large teams inside and outside Google. The stable release brings full documentation on angular.dev, a round of bug and performance fixes reported by the community, and compatibility with Angular Material and Angular Aria.

A minimal example: the model is a signal, form() derives a field tree from it, and validators are declared in a schema function.

import { Component, signal } from '@angular/core';
import { form, required, FormField } from '@angular/forms/signals';

@Component({
  selector: 'app-signup',
  imports: [FormField],
  templateUrl: './signup.html',
})
export class SignupComponent {
  readonly model = signal({ plan: '', seats: 1 });

  readonly signup = form(this.model, (path) => {
    required(path.plan, { message: 'Please choose a plan.' });
  });
}

In the template, [formField] binds a control to a field, and state such as invalid(), touched() and errors() is read like any other signal, which fits naturally with @if and @for blocks. The submit button can simply bind [disabled] to the form's overall validity.

Angular Aria

Angular Aria lets teams own the look and behavior of their components while delegating accessibility mechanics, such as keyboard interaction, focus management and screen reader semantics, to the framework. With v22, twelve accessibility patterns in Angular Aria are stable. The APIs have been finalized, community-reported bugs fixed, Signal Forms integration completed and test harnesses published so the patterns can be covered in component tests.

resource and httpResource

Signals were originally synchronous. The resource API extends them to async work: you describe parameters as a reactive function and supply a loader, and Angular reruns the loader whenever the parameters change, exposing the result as signals.

const city = signal('Oslo');

const forecast = resource({
  params: () => ({ city: city() }),
  loader: ({ params }) => loadForecast(params.city),
});

const label = computed(() =>
  forecast.hasValue() ? ${forecast.value().temp}°C : 'Loading…'
);

For the most common case, fetching JSON over HTTP, httpResource is now stable as well. You pass a function that returns a URL; any signal read inside it becomes a dependency, so changing the signal automatically triggers a new request:

readonly city = signal('Oslo');
readonly weather = httpResource<Forecast>(() => /api/forecast/${this.city()});

Dependency Injection Gets Simpler

The @Service Decorator

Most application services are root-level singletons, declared with @Injectable({ providedIn: 'root' }). v22 introduces @Service() as a shorter, more descriptive way to say the same thing:

import { Service } from '@angular/core';

@Service()
export class CartStore {
  private items: string[] = [];
  add(item: string) { this.items.push(item); }
  list() { return [...this.items]; }
}

It does not change how injection works, but it removes boilerplate from one of the most frequently written lines in an Angular codebase.

Lazy Services with injectAsync

Components have been lazy loadable for years; services were not. injectAsync closes that gap. You give it a dynamic import, and the service code is only downloaded the first time it is actually needed, which keeps rarely used heavy logic, such as export or charting utilities, out of the initial bundle.

export class ReportComponent {
  private exporter = injectAsync(() => import('./pdf-exporter'));

  async download() {
    (await this.exporter()).run();
  }
}

A prefetch: onIdle option lets the browser fetch the service in the background once it has nothing else to do, so the first click does not have to wait for the network.

Router Changes

Navigation API Integration

Calling withExperimentalPlatformNavigation() inside provideRouter() lets the router build on the browser's native Navigation API. The payoff is native scroll restoration, built-in loading indicators during navigation and accessibility announcements, without shipping extra JavaScript for any of it.

What's New in Angular 21.1: Signal Forms, Auto Cleanup and Template Support

Angular 21.1 ships with Signal Forms updates, router auto cleanup and new template syntax features.

Frontend Design Patterns That Actually Work in 2026

The frontend patterns worth standardizing on in 2026: component-based design, container queries, design systems, AI-assisted workflows and performance-first architecture.

Cleaning Up Route Injectors

Services provided at the route level could previously outlive the route that created them. withExperimentalAutoCleanupInjectors() destroys those injectors when the user navigates away, preventing a common source of memory leaks. Teams with a custom RouteReuseStrategy also get destroyDetachedRouteHandle, an official way to dispose of cached components safely.

Template Ergonomics

Templates pick up a set of small but welcome improvements:

• Comments inside elements. // and / / comments can now appear among attributes and bindings, which helps when documenting or temporarily disabling a binding.
• Spread and rest syntax. ... works in object literals, arrays and function calls within templates.
• Shared @case blocks. Multiple cases can map to one output block, and @default never; asks the compiler to verify that every possible value is handled.
• Arrow functions. Short inline functions can be written directly in templates.
• Host directive deduplication. If the same host directive matches an element more than once, Angular applies it only once.

Change Detection Defaults

Two changes clarify how change detection is configured. New applications now use OnPush by default, in line with the zoneless direction, so the setting no longer needs to be repeated on every component. And the old ChangeDetectionStrategy.Default is renamed to ChangeDetectionStrategy.Eager, a name that describes what it actually does rather than implying it is the recommended choice.

Error Boundaries Preview

A crash in one widget should not take down an entire page. Angular is moving error boundaries into templates with a new @boundary block paired with @error:

@boundary {
  <app-recommendations />
} @error (let e) {
  <app-recommendations-fallback />
}

If the content inside fails, the fallback renders and the rest of the page keeps working. The feature is planned to enter developer preview in Q3 2026.

Built for AI Coding Agents

The other theme of the release is preparing Angular for AI agents, both those that write code and those that operate inside the browser.

CLI MCP Server and Agent Skills

The Angular CLI's MCP server gains stable tools aimed at agents. devserver.start and devserver.stop control the dev server, and devserver.wait_for_build lets an agent trigger a build and read the result, which makes self-correcting loops possible: build, read the error, fix, repeat.

Because model training data often lags behind the latest APIs, the team also published Angular Agent Skills. angular-developer steers models toward current patterns such as Signal Forms and Angular Aria, and uses progressive disclosure so the core instructions stay small and detailed references load only when needed. angular-new-app walks agents through setting up a fresh local project.

WebMCP and Prototyping Tools

Experimental WebMCP support lets an AI agent running in the browser talk to the app directly. Tools can be generated from routes, services and Signal Forms, so the agent calls well-defined functions instead of poking at the DOM. On the prototyping side, deeper integration with Google AI Studio and Gemini Canvas means that asking for an Angular app in plain language produces a working project in an in-browser sandbox, which lowers the barrier for people without a coding background.

What's Being Deprecated

v22 deprecates Webpack-based builds: the @angular-devkit/build-angular builders and @ngtools/webpack. The team's focus is now the modern application builder with TSGo integration, so projects still on the Webpack builders should plan their migration.

For most teams a sensible upgrade order is: move to the application builder first if you have not already, run ng update to pick up the automated migrations, then adopt the new APIs incrementally. Signal Forms and httpResource can be introduced one screen at a time alongside existing reactive forms and HttpClient calls, and @Service can replace @Injectable({ providedIn: 'root' }) whenever a file is touched anyway. Experimental router options are best tried behind a flag in a staging environment before going to production.

Taken together with the stable APIs above, the direction is clear: signals everywhere, less ceremony, faster builds, and a framework that is as comfortable being driven by an agent as by a developer. The upgrade guides on angular.dev are the place to start.