Angular 20 : toutes les nouveautés

Signaux en v1 stable

Angular 20 marque la stabilisation complète de l'API des signaux. Toutes les fonctions liées aux signaux sont désormais stables et recommandées pour la production :

• signal(), computed(), effect() — stables depuis Angular 17/18
• input(), output(), model() — stables en Angular 19/20
• linkedSignal() — stable en Angular 20
• resource(), httpResource() — stables en Angular 20

Zoneless change detection stable

Le mode zoneless, expérimental depuis Angular 18, passe en stable dans Angular 20. La fonction de configuration change de nom :

// Angular 18-19 (expérimental)
provideExperimentalZonelessChangeDetection()

// Angular 20 (stable)
provideZonelessChangeDetection()

Zone.js n'est plus inclus par défaut dans les nouveaux projets générés avec Angular CLI 20.

resource() et httpResource() stables

La resource API introduite en Angular 19 devient stable. httpResource() supporte désormais des options avancées :

import { httpResource } from '@angular/common/http';

export class ProductsComponent {
  category = signal('electronics');

  products = httpResource(() => ({
    url: `/api/products`,
    params: { category: this.category() },
    headers: { 'Accept-Language': 'fr' }
  }));
}

Host directives améliorées

Angular 20 améliore les host directives introduites en Angular 15. Il est désormais possible de passer des inputs et outputs des host directives comme des bindings de template :

@Component({
  selector: 'app-button',
  standalone: true,
  hostDirectives: [
    {
      directive: TooltipDirective,
      inputs: ['tooltipText: label'],
      outputs: ['tooltipShown']
    }
  ],
  template: `<button><ng-content /></button>`
})
export class ButtonComponent {}

Usage dans le template parent :

<app-button label="Aide contextuelle" (tooltipShown)="onTooltip()">
  Enregistrer
</app-button>

Standalone par défaut

Angular CLI 20 génère tous les composants, directives et pipes en mode standalone: true par défaut. Les NgModules sont toujours supportés mais ne sont plus le modèle recommandé dans les nouveaux projets :

// ng generate component hero
// Génère automatiquement :
@Component({
  selector: 'app-hero',
  standalone: true,  // plus besoin de le spécifier manuellement
  imports: [],
  template: `...`
})
export class HeroComponent {}

Angular DevTools amélioré

Les Angular DevTools (extension Chrome/Firefox) reçoivent des améliorations majeures avec Angular 20 :

• Signals inspector : visualisez en temps réel les valeurs et dépendances de tous vos signaux
• Hydration debugger : identifiez les composants non hydratés et les erreurs d'hydration
• Performance profiler : mesurez le temps de chaque détection de changements par composant
• Dependency injection tree : naviguez l'arbre d'injection avec les nouveaux providers

Migrer vers Angular 20

La migration vers Angular 20 se fait via ng update comme pour toutes les versions précédentes :

# Mettre à jour Angular CLI et le core
ng update @angular/core @angular/cli

# Migrer les décorateurs @Input vers signal inputs
ng generate @angular/core:signal-input-migration

# Migrer vers le nouveau control flow (@if, @for, @switch)
ng generate @angular/core:control-flow

# Migrer vers les standalone components
ng generate @angular/core:standalone