Angular 19 : Signals et Hydration enfin matures en 2026

Introduction à Angular 19 et ses nouveautés

Nouveautés clés d'Angular 19

Angular 19 apporte des améliorations focalisées sur la réactivité et la performance :

• Primitives réactives (signal, computed, effect, update) pour une gestion d'état plus fine
• Hydratation client non-destructive pour activer l'interactivité sans réécrire le DOM pré-rendu
• Optimisations internes favorisant des rendus locaux plus fréquents et moins coûteux
• Meilleure ergonomie TypeScript pour typer les états et dérivations

Exemple correct et idiomatique d'utilisation d'un signal dans Angular 19 :

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

const count = signal(0);

// Préférer update pour les modifications atomiques
count.update(c => c + 1);

// Ou set en lisant la valeur via l'appel de fonction
count.set(count() + 1);

Remarques : un signal est une fonction (ici count()) qui retourne sa valeur actuelle. On ne doit pas utiliser des méthodes inexistantes comme .get() sur un signal.

Comprendre les Signaux dans Angular

Comment fonctionnent les signaux ?

Les signaux sont des primitives réactives légères. Un signal encapsule une valeur et informe automatiquement les dérivations (computed, effect) lorsque cette valeur change. L'API attend que vous appeliez le signal comme une fonction pour lire sa valeur (mySignal()), et propose des helpers comme set() et update() pour écrire.

Avantages :

• Réactivité fine et locale : seuls les dérivés concernés se recalculent
• Moins de boilerplate comparé à la gestion manuelle d'observables pour l'état local
• Meilleure lisibilité et maintenabilité grâce à computed / effect

Exemple d'incrément simple (usage correct) :

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

const counter = signal(0);

function increment() {
  counter.update(c => c + 1);
}

increment();

Ne faites pas l'erreur d'appeler .get() sur un signal (cette méthode n'existe pas). Utilisez l'appel fonctionnel counter() pour lire la valeur.

Linked Signals & Resource API

Angular a élargi l'écosystème des signaux avec des patterns et utilitaires complémentaires :

• Linked Signals — permettre le partage et la synchronisation explicite d'un signal entre plusieurs composants sans remonter l'état via des services lourds.
• Resource API — primitive pour gérer les données asynchrones (chargement, cache, invalidation) en conservant la réactivité et en s'intégrant naturellement aux computed/effect.

Exemple simplifié d'un resource (gestion d'un appel asynchrone et cache intégré) :

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

const userId = signal(null);

const userResource = resource(async (id: string | null) => {
  if (!id) return null;
  const res = await fetch(`/api/users/${id}`);
  return await res.json();
});

// Lancer le chargement
userId.set('42');
// Dans un composant : userResource(); // renvoie l'objet ou null en cas non chargé

Conseil : utilisez ces primitives pour encapsuler la logique de chargement et le cache côté client, puis exposez des signaux dérivés (linked signals) pour la consommation par les composants.

Bonnes pratiques : computed() et effect()

computed() — dérivations performantes

La fonction computed() permet de dériver des valeurs à partir d'un ou plusieurs signaux sans recalcul inutile. Utilisez-la pour calculs purement dérivés (agrégations, filtres, etc.).

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

const items = signal([{ price: 10 }, { price: 15 }]);

const total = computed(() => items().reduce((sum, it) => sum + it.price, 0));

console.log('Total:', total());

effect() — effets secondaires contrôlés

effect() remplace souvent les abonnements ad hoc aux observables quand l'effet doit réagir à des changements de signaux. Un effect exécute une fonction (typiquement un effet secondaire) à chaque fois que les signaux consultés à l'intérieur changent.

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

const compteur = signal(0);

// Exécute ce bloc à chaque changement de compteur
effect(() => {
  console.log('Valeur actuelle:', compteur());
});

compteur.update(c => c + 1);

Conseils :

• N'utilisez effect que pour des opérations à effet de bord (log, analytics, intégration DOM non-Angular, appels réseau déclenchés par un changement de signal).
• Pour la logique purement synchrone dérivée, préférez computed.
• Préférez update(fn) à set(fn()) pour les modifications atomiques basées sur la valeur actuelle.

Configuration : activer l'hydratation client

Depuis Angular 19 (publié en nov. 2024), l'hydratation cliente non-destructive est activée par défaut dans les nouveaux projets créés avec les outils officiels. Si vous devez expliciter ou personnaliser la fourniture d'hydratation (par exemple dans un bootstrap programmatique), voici un exemple d'intégration dans main.ts / app.config.ts.

Exemple : activer explicitement l'hydratation lors du bootstrap (utile pour override ou tests)

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideClientHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    // Fournit l'hydratation côté client. Dans Angular 19, ce provider est généralement actif par défaut
    provideClientHydration(),
  ],
}).catch(err => console.error(err));

Remarques pratiques :

• Vérifiez si votre project scaffolding active déjà l'hydratation — dans la plupart des projets Angular 19 récents, provideClientHydration() est fourni automatiquement.
• Si vous utilisez un runtime personnalisé ou un bootstrap multiple, fournissez explicitement provideClientHydration() dans la liste de providers.
• Ne mixez pas hydratation et re-render complet : privilégiez la réconciliation d'état via signaux.

Diagramme du processus d'hydratation

Vue synthétique du flux d'hydratation : du rendu HTML côté serveur à l'activation non-destructive de l'interactivité côté client.

L'Hydration : Qu'est-ce que c'est et pourquoi est-ce important ?

Définition et avantages de l'hydratation

Dans Angular 19, l'hydratation désigne la phase où l'application cliente reprend et active l'HTML pré-rendu côté serveur sans provoquer un re-render complet — on parle d'hydratation non-destructive. L'objectif est d'offrir un rendu initial rapide tout en réactivant les comportements interactifs (listeners, hooks, signaux) d'une façon fiable et cohérente.

Contrairement à un remount complet, la méthode non-destructive réconcilie l'état client avec le DOM préexistant et connecte les primitives réactives (signaux, computed, effect) aux éléments déjà rendus.

Exemple de pattern d'hydratation (reconcilier les signaux côté client)

import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

// Dans un composant Angular
// constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    // Code exécuté uniquement côté client après SSR
    // Reconnecter les signaux / déclencher les effets nécessaires
    // Note: provideClientHydration() est en général activé par défaut dans Angular 19
    this.bootstrapClientBehaviors();
  }
}

Bonnes pratiques lors de l'hydratation :

• Ne pas réinitialiser le DOM pré-rendu : préférez la réconciliation des états (signaux) plutôt que le re-render complet.
• Utiliser des signaux pour représenter les données visibles afin de pouvoir les rattacher facilement après hydratation.
• Contrôler l'initialisation côté client avec isPlatformBrowser ou TransferState quand des données doivent être transmises du serveur au client.

Améliorations des Performances avec Signals et Hydration

Optimisation des performances

L'utilisation combinée des signaux et d'une hydratation non-destructive permet :

• De réduire les rendus inutiles en recalculant uniquement les dérivés affectés
• D'accélérer le rendu initial grâce au SSR suivi d'une hydratation locale
• D'améliorer la réactivité pour les interfaces à forte interaction

Exemple : remplacer un ancien pattern basé sur des abonnements pour mettre à jour la console par un effect() :

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

const compteur = signal(0);

// Remplace un .subscribe() incorrect sur un signal par effect()
effect(() => {
  console.log('Valeur actuelle:', compteur());
});

compteur.update(c => c + 1);

Remarque : évitez d'appeler .subscribe() sur un signal — les signaux ne fournissent pas cette méthode. Utilisez effect() pour les effets secondaires.

Cas d'Utilisation et Scénarios Pratiques

Applications pratiques des nouvelles fonctionnalités

Quelques scénarios où Angular 19 apporte un bénéfice tangible :

• Systèmes de gestion de projet : signaux pour les statuts de tâches et computed pour les métriques dérivées
• Plateformes e-commerce : SSR + hydratation non-destructive pour un affichage produit instantané et une réactivité côté client
• Tableaux de bord temps réel : signaux pour flots de données, effect pour side‑effects (logs, sockets)
• Applications de chat : hydratation pour afficher l'histoire de la conversation, signaux pour les mises à jour en direct

Exemple d'utilisation d'un signal pour suivre le statut d'une tâche (syntaxe correcte) :

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

const statusTask = signal('En cours');

// Mise à jour du statut via set ou update
statusTask.set('Complétée');