La sortie d’Angular 22, c’est un peu comme un avion qui décolle : la montée est régulière, puissante, et ce qui se profile à l’horizon donne vraiment envie. Signal Forms, resource, httpResource, Angular Aria, support TypeScript 6, et même des outils pensés pour le développement agentique : le framework Google met le paquet. On fait le tour.

Signal Forms : production ready

Introduits en developer preview dans la v21, les Signal Forms passent en stable. L’idée ? Fusionner le meilleur des Reactive Forms (typage fort, testabilité), la simplicité des Template-Driven Forms, et la réactivité fine des signaux. Résultat : des formulaires composables, déclaratifs et typés, sans les cérémonies habituelles (boilerplate).

Exemple basique :

import { signal } from "@angular/core";
import { form, required } from "@angular/forms/signals";

@Component({
  selector: 'app-payment',
  templateUrl: './app-payment.html',
})
class Payment {
  readonly paymentModel = signal({
    paymentType: '',
    amount: 0
  });

  readonly f = form(this.paymentModel, schema => {
    required(schema.paymentType, {
      message: 'Champ obligatoire'
    });
  });
}

Un seul appel à form(), un modèle basé sur signal(), et la validation définie de manière déclarative au même endroit. Angular Material et Angular Aria sont d’ores et déjà compatibles.

→ Lire l’article détaillé : Signal Forms, avant/après

resource et httpResource : la réactivité asynchrone

Jusqu’ici, les signaux étaient purement synchrones. Avec resource et httpResource, Angular introduit une réactivité asynchrone native, directement dans l’API des signaux. Plus besoin d’orchestrer manuellement des Observables pour un fetch HTTP : le loader se déclenche automatiquement quand les paramètres changent.

import { resource, signal, computed } from '@angular/core';

const selectedCity = signal('Chicago');

const weatherResource = resource({
  params: () => ({ city: selectedCity() }),
  loader: ({ params }) => fetchWeatherForecast(params.city),
});

const currentTemperature = computed(() => {
  if (weatherResource.hasValue()) {
    return `${weatherResource.value().temperature}°F`;
  }
  return 'Loading weather...';
});

httpResource pousse le concept plus loin en encapsulant HttpClient : intercepteurs, status HTTP, tout y passe.

→ Lire l’article détaillé : resource et httpResource, avant/après

Angular Aria : l’accessibilité sans prise de tête

Douze patterns d’accessibilité passent en stable. Accordéon, dialog, tree, combobox… chaque pattern fournit les rôles ARIA, la gestion clavier, et le focus management. Vous apportez le style, Angular Aria gère le reste.

@Service et injectAsync

Le nouveau décorateur @Service() remplace avantageusement @Injectable({ providedIn: 'root' }) pour les singletons :

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

@Service()
export class BasicDataStore {
  private data: string[] = [];
  addData(item: string): void { this.data.push(item); }
  getData(): string[] { return [...this.data]; }
}

Et avec injectAsync, les services peuvent être lazy-loadés pour du code-splitting :

import { Component, injectAsync } from '@angular/core';

@Component({ /* ... */ })
export class Report {
  private exporter = injectAsync(() => import('./report-exporter'));

  async export() {
    const exporter = await this.exporter();
    exporter.export();
  }
}

Router : Navigation API, auto-cleanup

Le routeur s’aligne sur la Navigation API native du navigateur : interception fluide des navigations, scroll restoration native, annonces a11y pendant les transitions. Deux nouvelles features expérimentales : withExperimentalAutoCleanupInjectors pour éviter les fuites mémoire, et destroyDetachedRouteHandle pour nettoyer proprement les composants cachés.

Templates : spread, @switch exhaustif, arrow functions

Les templates Angular gagnent en expressivité :

• Spread syntax dans les objets, tableaux et appels de fonction
• @switch multi-cas (plusieurs @case partagent le même bloc) et vérification exhaustive via @default never;
• Arrow functions inline autorisées pour les transformations simples
• Commentaires dans les propriétés HTML

Développement agentique : MCP et Agent Skills

Angular 22 muscle son offre « AI-native ». Le serveur MCP Angular CLI expose des outils comme devserver.wait_for_build (boucle d’auto-réparation pour agents), ai_tutor, modernize, onpush_zoneless_migration. Les Agent Skills (github.com/angular/skills) donnent aux assistants IA le contexte immédiat sur les bonnes pratiques Angular modernes.

Et une preview excitante : WebMCP, qui permet d’exposer des outils structurés pour que les agents interagissent avec l’application directement, sans manipuler le DOM.

→ Lire l’article détaillé : Développement agentique avec Angular (opencode, Claude, GPT, DeepSeek)

OnPush par défaut, TypeScript 6, @boundary en approche

• OnPush devient la stratégie de change detection par défaut pour les nouvelles apps. L’ancien Default est renommé Eager.
• Support complet de TypeScript 6.
• @boundary, un système d’error boundaries dans les templates, arrive en developer preview au Q3 2026.

Et la suite ?

Webpack et les builders @angular-devkit/build-angular sont dépréciés au profit de l’Application Builder basé sur TSGo. La direction est claire : performance, modernité et simplicité.

Dans les prochains articles, on plonge en profondeur dans Signal Forms, resource/httpResource, et le développement agentique avec Angular.

Voir le changelog de la version 22 d’Angular.