DEV Community: Houdass Youness

Embracing Zoneless in Angular: A New Era of Change Detection

Houdass Youness — Mon, 20 Jan 2025 20:47:02 +0000

With the release of Angular version 18 on 22 may 2024, the framework introduces an exciting experimental feature: zoneless Angular apps. This innovation eliminates the reliance on the Zone.js library, offering improved performance, reduced overhead, and a simplified debugging experience. In this article, we’ll explore what zoneless applications entail, the advantages they offer, and how you can experiment with this cutting-edge functionality.

Understanding Change Detection in Angular (Pre-Zoneless)

Change detection ensures that the application's DOM stays in sync with the underlying data model in components. Traditionally, Angular has relied on Zone.js to manage change detection. Here's a quick overview of when change detection occurs:

User Interactions: Events like button clicks or typing in an input field.
Asynchronous Operations: Actions such as HTTP requests, setTimeout, setInterval or Promise resolutions.
Manual Triggers: Invocations like ApplicationRef.tick() or ChangeDetectorRef.detectChanges().

Zone.js achieves this by patching browser APIs (e.g., events or timers) and notifying Angular to start change detection. While this approach works seamlessly, it introduces some overhead and can lead to issues like the infamous ExpressionChangedAfterItHasBeenCheckedError.

Examples of Change Detection Before Zoneless

Before Angular introduced zoneless change detection, Zone.js was central to automatically tracking and propagating changes to the UI. The following embedded StackBlitz example demonstrates various scenarios:

Simple property set in an event handler: Clicking a button updates a counter property. Zone.js intercepts the event, schedules a change detection cycle, and the UI reflects the updated value.
Simple property set asynchronously: An interval updates a tick property every second. Zone.js detects the asynchronous operation (setInterval) and schedules change detection to reflect the updated value in the DOM.
Data retrieved from HTTP and stored in an array: Data fetched via an HTTP request is stored in an array, and Angular’s default change detection ensures the view updates automatically without requiring user interaction. This works because HttpClient operates within Angular's zone, triggering change detection when the response is received. However, if the component uses ChangeDetectionStrategy.OnPush and the array is mutated directly (e.g., using push), the view might not update unless the reference changes or change detection is triggered manually.
Data retrieved from HTTP with async pipe: Using the AsyncPipe simplifies observables by automatically subscribing and triggering change detection when new data is emitted, eliminating manual handling.
Data retrieved from HTTP and stored in a signal: With signals, introduced in modern Angular, state changes directly notify dependent readers, streamlining updates and making the process independent of Zone.js.

These examples showcase how Zone.js historically handled asynchronous operations and change detection, paving the way for Angular's more efficient, lightweight, and scalable zoneless architecture.

Why Go Zoneless?

Moving away from Zone.js brings several benefits:

Simplified Change Detection: Developers no longer need to contend with ExpressionChangedAfterItHasBeenCheckedError and other zone-related quirks.
Reduced Overhead: Eliminating zone.js lightens the framework, improving runtime performance.
Improved Debugging: Zoneless applications provide better control over change detection, making it easier to pinpoint performance bottlenecks.

How to Configure a Zoneless Angular Application?

Switching to a zoneless application requires a few configuration changes. Here's a step-by-step guide:

Enable Experimental Zoneless Change Detection In app.config.ts, add the following provider:

providers: [
  provideExperimentalZonelessChangeDetection()
]

Ensure you remove the provideZoneChangeDetection() provider if it exists.

Remove zone.js Imports

Delete import 'zone.js'; from your application files.
Update angular.json to remove zone.js from the polyfills section:

"polyfills": []

Uninstall zone.js Run the following command to remove zone.js from your project:

npm uninstall zone.js

Testing Change Detection Without Zone.js

The following example demonstrates how change detection behaves in various scenarios without the use of zone.js.

In this example, we’ve kept the initial setup and simply removed Zone.js. Now, let's break down each of the five scenarios mentioned in the example, analyzing them case by case without Zone.js:

First Case: Simple Property Set in an Event Handler

As you can observe, it works as before, and the view updates when the "increment" button is clicked.

Second Case: Simple Property Set Asynchronously

Here’s the example:

Without Zone.js, asynchronous changes like setInterval don’t automatically update the UI, we can fix this by calling:

this.changeDetectorRef.markForCheck();

Here’s the corrected version:

Alternatively, we can use signals for a cleaner solution:

Here’s the updated version:

In Summary:

Use tick = signal(0); instead of tick = 0;.
Replace this.tick += 1; with this.tick.update((value) => value + 1);.
Call tick() in the HTML instead of directly using tick.

Third Case: Data Retrieved from HTTP and stored in an Array

In this example, you’ll notice that the view is not updated:

To fix this, we can again use:

this.changeDetectorRef.markForCheck();

Here’s the corrected version:

But rather than relying on ChangeDetectorRef, I prefer using async, which automatically updates the view. This leads us to the fourth use case.

Fourth Case: Data Retrieved from HTTP with Async Pipe

This is straightforward, just apply the async pipe in the HTML as shown in the following example:

There’s also a third approach: using signals, similar to what we did in the second case for handling asynchronous scenarios. Here’s how in the following section ...

Fifth Case: Data Retrieved from HTTP and Stored in a Signal

Instead of: users$ = this.getData(); use: usersSignal = toSignal(this.getData(), { initialValue: [] });
And in the template, replace: @for(user of users$ | async; track user.id) with: @for(user of usersSignal(); track user.id)

In conclusion:

Property Updates in Events
When a property is updated within an event handler (e.g., button click), the UI updates seamlessly, just as before.
Asynchronous Operations
Updating properties asynchronously (e.g., setInterval) requires manual intervention. Without zone.js, Angular is unaware of state changes. You can address this by explicitly calling:

this.changeDetectorRef.markForCheck();

This schedules a manual change detection cycle, ensuring the UI updates.

HTTP Requests with Observables When retrieving data via HTTP and storing it in an array, the UI doesn't update automatically. Use the async pipe in your templates to handle this gracefully:

<div *ngFor="let user of users$ | async">
  {{ user.name }}
</div>

The async pipe subscribes to the observable, triggering change detection whenever new data is emitted.

Signals for Change Detection
Angular’s experimental signals offer a powerful alternative. By converting state to signals, Angular registers them as view dependencies. When the signal updates, the UI automatically reflects the changes without manual triggers:
HTTP Requests with Signals
Convert observables to signals using toSignal():
Angular manages subscriptions automatically, and the UI updates whenever the signal changes.

On November 19, 2025, with the release of Angular 19, the framework advanced its efforts to enhance and refine zoneless application support. Six months after the initial experimental release, the Angular team has enhanced APIs, introduced support for server-side rendering, and improved the testing experience. While there are still some refinements before the API reaches developer preview, Angular remains committed to iterating on this feature in 2025. Developers are encouraged to explore zoneless in their projects using the Angular CLI:

ng new [project-name] --experimental-zoneless

ChangeDetectionStrategy dans Angular (de zéro à héros) - Partie 1/2

Houdass Youness — Mon, 06 Mar 2023 06:20:04 +0000

1- Change Detection Strategy

La stratégie de détection de changement dans Angular régit la manière dont Angular décide s'il faut ou non mettre à jour l'interface utilisateur lorsque le modèle de données change (via l'annotation @Input()).

En Angular, il existe deux stratégies de détection de changement disponibles.

1.1- Default Change Detection Strategy

Cette stratégie de détection des changements est par défaut dans Angular. elle vérifie toutes les propriétés du modèle de données à chaque cycle de rendu pour déterminer si des modifications ont été effectuées. Si des modifications sont détectées, Angular met à jour l'interface utilisateur en conséquence. Cette méthode assure une grande précision, mais peut ralentir les performances des applications complexes qui ont de nombreuses données en constante évolution. Dans ces cas-là, il est recommandé de passer à une stratégie de détection de changements personnalisée pour améliorer les performances.

NB: Quand il y a un changement, la carte devient jaune.

1.2- OnPush Change Detection Strategy

La stratégie de détection de changements OnPush est une stratégie de performance optimisée. Elle vérifie les modifications uniquement lorsque les données sont explicitement modifiées via des actions telles que des clics de bouton ou des entrées utilisateur, ou lorsque de nouvelles références d'objets ou de tableaux sont fournies. Si aucun changement n'est détecté, Angular ne met pas à jour l'interface utilisateur. Cette stratégie est particulièrement utile pour les applications complexes avec des données statiques. Toutefois, vous devez être prudent lorsque vous utilisez cette stratégie, car si des modifications sont apportées aux données sans en informer Angular, l'interface utilisateur ne sera pas mise à jour.

2- Passage par valeur & par référence

Lorsque nous utilisons la stratégie de détection de changement OnPush, nous devons travailler avec des objets immuables, ce qui représente un contrat que nous signons avec Angular. L'avantage d'utiliser l'immuabilité dans le contexte de la détection de changement est que Angular peut effectuer une vérification simple des références pour déterminer si la vue doit être mise à jour. Ces vérifications sont moins coûteuses qu'une comparaison approfondie. Il est important de noter que les variables sont transmises par valeur, tandis que les objets (y compris les tableaux en JavaScript) sont transmis par référence.

2.1- Cas d'une variable primitive

function sayHello(name) {
   name = "Hello " + name;
}

let user = "Angular";
sayHello(user);
console.log(user); // "Angular"

Dans cet exemple, la fonction sayHello reçoit une variable primitive name en argument. Lorsque nous appelons cette fonction avec la variable user, qui contient la chaîne de caractères "Angular", la valeur de user ne change pas. Par conséquent, la variable user n'est pas modifiée en dehors du contexte de la fonction. Il est important de comprendre que les chaînes de caractères, les booléens et les nombres sont transmis par valeur.

2.2- Cas d'un object / array

// Object
const user = { id: 1, name: 'User1' };
const anotherUser = user;

user.hobby = 'Programming';

console.log(user); // { id: 1, name: 'User1', hobby: 'Programming' }
console.log(anotherUser); // { id: 1, name: 'User1', hobby: 'Programming' }

// Array
const users = ['A', 'B'];
const friends = users;

users.push('C');

console.log(users); // ['A', 'B', 'C']
console.log(friends); // ['A', 'B', 'C']

Dans cet exemple, nous créons un objet user avec deux propriétés, id et name, ainsi qu'un tableau users contenant deux éléments. Nous assignons ensuite user à la variable anotherUser, et users à la variable friends. Nous ajoutons ensuite une propriété hobby à l'objet user et un élément C au tableau users. Lorsque nous imprimons user, anotherUser, users et friends, nous pouvons constater que les modifications apportées à user et users ont également été appliquées à anotherUser et friends, respectivement. Cela s'explique par le fait que les objets et les tableaux sont transmis par référence, et non par valeur.

Il est essentiel de comprendre la différence entre les passages par référence et par valeur, car cela nous permettra de mieux comprendre la manière dont nous passons les données à nos composants Angular via le décorateur @Input(), ainsi que la stratégie OnPush.

3- Exemples concrets d'utilisation de la stratégie OnPush avec le passage par valeur/référence

Dans l'exemple ci-dessous, il est possible de constater que le clic sur le bouton ne fonctionne pas comme prévu. En effet, cela est dû à la modification directe de la référence de l'objet via la ligne de code suivante :

this.card.title = 'Card 1 title changed !!';

Afin d'obtenir le comportement souhaité dans l'exemple précédent, il est nécessaire de changer la référence de l'objet. Cela peut être réalisé en affectant un nouvel objet à la variable, comme suit :

this.card = { title: 'Card 1 title changed !!', description: 'Lorem ipsum 1' };

Une autre méthode consiste à utiliser l'opérateur de propagation ("spread operator") pour créer une copie de l'objet existant, puis à remplacer la propriété désirée, comme suit :

this.card = { ...this.card, title: 'Card 1 title changed !!' };

Il est par ailleurs possible d'utiliser des méthodes helpers telles que cloneDeep de la bibliothèque lodash ou la méthode native JavaScript structuredClone pour réaliser une copie profonde de l'objet.

OnPush & l'asynchronisme

Dans l'exemple suivant, lorsqu'on clique sur le bouton "Add synchronically", Angular effectue une détection de changement et met à jour la vue conformément aux modifications apportées.

Il peut sembler logique que cela fonctionne avec toutes les API asynchrones qui déclenchent la détection de changement, mais ce n'est malheureusement pas le cas. En effet, un clic sur le bouton "Add Asynchronically" ne fonctionnera pas.

Notez que l'asynchronisme peut être déclenché par l'utilisation de certaines fonctions telles que setTimeout, setInterval, des Promises et Http, entre autres.

4- Lancer la "Change Detection" explicitement.

Angular nous fournit un moyen pour déclencher nous-mêmes la détection de changements lorsque cela est nécessaire.

Une des méthodes pour déclencher manuellement la détection des changements dans Angular est d'utiliser la fonction detectChanges(). Cela permet d'indiquer à Angular d'exécuter la détection de changements sur le composant et ses enfants.

5- Async Pipe

Le pipe async souscrit à un observable ou une promesse et renvoie la dernière valeur qu'il a émise.

Voyons un exemple simple d'un composant qui utilise la stratégie OnPush et qui reçoit un observable en entrée (@input()).

Lorsque nous cliquons sur le bouton, nous ne verrons pas la vue mise à jour. Cela est dû au fait qu'aucune des conditions mentionnées ci-dessus ne s'est produite, Angular ne vérifiera donc pas le composant lors du cycle de détection de changement actuel.

Une solution possible consiste, comme expliqué précédemment, à utiliser la méthode detectChanges() pour déclencher explicitement la détection de changements.

Très bien ! Utilisons maintenant le pipe async.

Le pipe async est un moyen pratique de gérer des valeurs asynchrones dans un template Angular. Il souscrit automatiquement à un observable ou à une promesse et retourne la dernière valeur émise.

Dans notre cas, nous pouvons utiliser le pipe async pour notre observable cards$ et Angular se chargera automatiquement de détecter les changements et de mettre à jour la vue lorsque la valeur de l'observable change.

Voici comment nous pouvons utiliser le pipe async dans notre example:

6- Conclusion

Dans cet article, nous avons examiné les deux stratégies de détection de changement disponibles dans Angular, à savoir la stratégie par défaut et la stratégie OnPush.

Nous avons souligné l'importance de travailler avec des objets immuables lors de l'utilisation de la stratégie OnPush et expliqué les différences entre les passages par référence et par valeur.

En outre, nous avons fourni des exemples pratiques d'utilisation de la stratégie OnPush avec le passage par valeur/référence et nous avons également illustré l'utilisation concrète le pipe async.

J'espère que cet article vous a été bénéfique, une deuxième partie de cet article sera bientôt disponible, nous aurons l'occasion de nous retrouver pour approfondir davantage le sujet.