Adopter le sans zone dans Angular : une nouvelle ère de détection des changements

Angular 18, sorti le 22 mai 2024, a introduit une nouveauté expérimentale qui change la donne : les applications angulaires sans zone. Cela élimine la dépendance à Zone.js, améliore les performances, réduit les frais généraux et simplifie le débogage. Examinons les applications sans zone, leurs avantages et comment expérimenter cette fonctionnalité.

Comprendre la détection de changement d'Angular (pré-zone sans)

La détection des modifications maintient le DOM synchronisé avec les données des composants. Auparavant, Angular s'appuyait sur Zone.js. Détection de changement déclenchée de ces manières :

• Interactions utilisateur : Clics sur les boutons, saisie de texte.
• Opérations asynchrones : Requêtes HTTP, setTimeout, setInterval, Résolutions de promesses.
• Déclencheurs manuels : ApplicationRef.tick(), ChangeDetectorRef.detectChanges().

Zone.js a corrigé les API du navigateur, demandant à Angular de lancer la détection des modifications. Bien qu'efficace, cela ajoutait des frais généraux et causait parfois ExpressionChangedAfterItHasBeenCheckedError.

Exemples de détection de changement (pré-zone sans)

Avant la détection des changements sans zone, Zone.js gérait les mises à jour de l'interface utilisateur. Cet exemple StackBlitz illustre :

1. Mise à jour de la propriété du gestionnaire d'événements : Un clic sur un bouton met à jour un compteur. Zone.js intercepte, planifie la détection des changements et met à jour l'interface utilisateur.
2. Mise à jour asynchrone de la propriété : Un intervalle met à jour une propriété. Zone.js détecte l'opération asynchrone et met à jour l'interface utilisateur.
3. Données HTTP (Array) : Les données récupérées via HTTP sont stockées dans un tableau ; La détection des changements par défaut d'Angular met à jour la vue. Cependant, avec ChangeDetectionStrategy.OnPush, les mutations directes du tableau peuvent ne pas mettre à jour la vue à moins que les changements de référence ou la détection des changements ne soient déclenchés manuellement.
4. Données HTTP (Async Pipe) : AsyncPipe simplifie la gestion observable, s'abonne automatiquement et déclenche la détection des modifications.
5. Données HTTP (signal) : Les signaux angulaires (une fonctionnalité moderne) informent directement les lecteurs dépendants, rationalisant les mises à jour indépendamment de Zone.js.

Ces exemples mettent en évidence le rôle de Zone.js dans la détection des changements, ouvrant la voie à l'architecture sans zone améliorée d'Angular.

Pourquoi choisir le sans zone ?

La suppression de Zone.js offre des avantages significatifs :

• Détection simplifiée des changements : Moins de ExpressionChangedAfterItHasBeenCheckedError problèmes et complexités liées aux zones.
• Surcharge réduite : Un cadre plus léger, améliorant les performances.
• Débogage amélioré : Meilleur contrôle de la détection des modifications, identification plus facile des goulots d'étranglement des performances.

Configurer une application angulaire sans zone

Le passage au sans zone nécessite des modifications de configuration :

1. Activer la détection de changement sans zone : Dans app.config.ts, ajoutez :

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

Supprimer provideZoneChangeDetection() s'il est présent.

2. Supprimer les importations Zone.js :

• Supprimez import '*zone.js'; de vos dossiers de candidature.
• Dans angular.json, supprimez zone.js du tableau polyfills :

<code class="language-json">"polyfills": []</code>

3. Désinstaller Zone.js :

<code class="language-bash">npm uninstall zone.js</code>

Test de la détection des changements sans Zone.js

Cet exemple illustre la détection des changements sans Zone.js :

Analysons chaque scénario :

Scénario 1 : Mise à jour de la propriété du gestionnaire d'événements

Fonctionne comme prévu.

Scénario 2 : Mise à jour asynchrone des propriétés

Nécessite this.changeDetectorRef.markForCheck(); ou en utilisant des signaux :

Version corrigée (avec markForCheck) :

Version corrigée (avec signaux) :

Scénario 3 : Données HTTP (tableau)

La vue ne se met pas à jour automatiquement :

Version corrigée (avec markForCheck) :

L'utilisation de async tuyaux est préférable.

Scénario 4 : Données HTTP (canal asynchrone)

Simple ; utilisez le async tuyau :

Scénario 5 : Données HTTP (signal)

Utilisez toSignal() pour convertir les observables en signaux :

Résumé :

• Gestionnaires d'événements : L'interface utilisateur se met à jour de manière transparente.
• Opérations asynchrones : Nécessite markForCheck() ou des signaux.
• HTTP (Observables) : Utilisez le canal async.
• Signaux : Mises à jour automatiques de l'interface utilisateur en cas de changement de signal.

Mise à jour angulaire 19 (19 novembre 2025)

Angular 19 a encore affiné la prise en charge des applications sans zone, en améliorant les API, en ajoutant la prise en charge du rendu côté serveur et en améliorant les tests. La CLI angulaire prend désormais en charge la création de projets sans zone :

<code class="language-typescript">providers: [
  provideExperimentalZonelessChangeDetection()
]</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!