Angular 19 : toutes les nouveautés

Résumé des changements Angular 19

Angular 19 consolide l'écosystème des signaux et améliore drastiquement la Developer Experience. Le focus est sur la flexibilité du rendu, la productivité et la finalisation des APIs expérimentales.

Highlights Angular 19 :

• @let : variables locales dans les templates
• Route render mode : SSR / SSG / CSR par route
• HMR des styles : mise à jour CSS sans rechargement
• linkedSignal() et resource() : APIs stables
• Hydration incrémentale : chargement progressif des composants
• Effect cleanup : nettoyage propre des effets
• Standalone par défaut dans tous les schematics CLI

Variable de template @let

@let permet de déclarer des variables locales directement dans le template HTML, sans avoir à créer des propriétés intermédiaires dans le composant.

Avant (Angular 18 et avant) :

// Composant
get fullName() { return `${this.user?.firstName} ${this.user?.lastName}`; }

// Template
<p>{{ fullName }}</p>

Après (Angular 19 avec @let) :

@let user = currentUser();
@let fullName = user.firstName + ' ' + user.lastName;

@if (user) {
  <h2>{{ fullName }}</h2>
  <p>{{ user.email }}</p>
}

Route render mode (SSR/SSG/CSR par route)

Angular 19 permet de définir un mode de rendu différent pour chaque route. Plus besoin de choisir entre "tout SSR" ou "tout CSR".

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '',
    renderMode: RenderMode.Prerender  // SSG : généré à la build
  },
  {
    path: 'blog/:slug',
    renderMode: RenderMode.Server     // SSR : rendu à chaque requête
  },
  {
    path: 'dashboard',
    renderMode: RenderMode.Client     // CSR : rendu côté client uniquement
  }
];

HMR des styles sans rechargement

Angular 19 améliore le Hot Module Replacement : les modifications de styles CSS/SCSS sont appliquées instantanément sans rechargement de page. L'état de l'application est préservé.

# HMR des styles activé par défaut en ng serve
ng serve

# Pour désactiver
ng serve --no-hmr

• Styles globaux (styles.scss) : mis à jour sans rechargement
• Styles de composants : mis à jour sans rechargement
• Templates HTML : rechargement complet (pas encore HMR)

Effect cleanup et afterRenderEffect

Angular 19 introduit deux améliorations majeures pour la gestion des effets.

1. Effect cleanup : une fonction de nettoyage exécutée avant chaque ré-exécution de l'effet ou à la destruction du composant.

effect((onCleanup) => {
  const ws = new WebSocket(this.url());

  onCleanup(() => ws.close()); // appelé avant la prochaine exécution
});

2. afterRenderEffect() : un effet qui s'exécute après chaque rendu, uniquement côté client. Parfait pour les mesures DOM ou les animations.

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

export class ChartComponent {
  constructor() {
    afterRenderEffect(() => {
      // Accès sûr au DOM après le rendu
      this.drawChart();
    });
  }
}

Standalone par défaut dans le CLI

À partir d'Angular 19, tous les schematics CLI génèrent du code standalone par défaut.

# Nouveau projet : pas de AppModule
ng new my-app

# Composant standalone automatiquement
ng generate component header
# → standalone: true sans option supplémentaire

# Directive standalone
ng generate directive highlight

# Pipe standalone
ng generate pipe truncate

Migration d'Angular 18 à 19

La migration est automatisée et sans breaking changes majeurs.

1. Mettre à jour les dépendances :

ng update @angular/cli@19 @angular/core@19

2. Vérifier avant de migrer :

ng update @angular/core@19 --dry-run

Prérequis :

• TypeScript 5.5 ou supérieur
• Node.js 18.19+ ou 20.9+
• RxJS 7.4+ (inchangé)