Cet avertissement n'apparaît que dans le navigateur, pendant le processus d'hydratation, lorsque celle-ci est activée sur le client mais que l'application reste instable pendant une longue période (plus de 10 secondes).
Cela se produit généralement lorsque des microtâches ou des macrotâches sont en attente sur une page.
L'hydratation d'Angular s'appuie sur un signal de ApplicationRef.isStable indiquant que l'application devient stable :
- pendant le rendu côté serveur (SSR), pour lancer le processus de sérialisation
- dans un navigateur, ce signal sert à lancer le nettoyage post-hydratation qui supprime les nœuds DOM restés non réclamés
Cet avertissement s'affiche lorsque ApplicationRef.isStable n'émet pas true dans un délai de 10 secondes. Si ce comportement est intentionnel et que votre application se stabilise plus tard, vous pouvez choisir d'ignorer cet avertissement.
Applications qui utilisent zone.js
Dans les applications qui utilisent zone.js, différents facteurs peuvent retarder la stabilité. Il peut s'agir de requêtes HTTP en attente, de timers (setInterval, setTimeout) ou d'une logique qui appelle continuellement requestAnimationFrame.
Macrotâches
Les macrotâches incluent des fonctions comme setInterval, setTimeout, requestAnimationFrame, etc.
Si l'une de ces fonctions est appelée pendant la phase d'initialisation de l'application ou dans les composants utilisés pour le bootstrap, elle peut retarder le moment où l'application devient stable.
@Component({
selector: 'app',
template: ``,
})
class Simple {
constructor() {
setInterval(() => { ... }, 1000)
// or
setTimeout(() => { ... }, 10_000)
}
}Si ces fonctions doivent être appelées pendant la phase d'initialisation, les invoquer en dehors de la zone Angular résout le problème :
class Simple {
constructor() {
const ngZone = inject(NgZone);
ngZone.runOutsideAngular(() => {
setInterval(() => {}, 1000);
});
}
}Libraries tierces
Certaines libraries tierces peuvent aussi produire des tâches asynchrones de longue durée, susceptibles de retarder la stabilité de l'application. Il est recommandé d'invoquer le code de library concerné en dehors de la zone, comme décrit ci-dessus.
Exécuter du code une fois l'application stable
Vous pouvez exécuter du code qui met en place des tâches asynchrones une fois que l'application est devenue stable :
class Simple {
constructor() {
const applicationRef = inject(ApplicationRef);
applicationRef.isStable.pipe( first((isStable) => isStable) ).subscribe(() => {
// Note that we don't need to use `runOutsideAngular` because `isStable`
// emits events outside of the Angular zone when it's truthy (falsy values
// are emitted inside the Angular zone).
setTimeout(() => { ... });
});
}
}Applications zoneless
Dans les scénarios zoneless, la stabilité peut être retardée par du code applicatif dans un effect qui s'exécute en boucle infinie (par exemple parce que les signals utilisés dans les fonctions d'effect ne cessent de changer) ou par une requête HTTP en attente.
Les développeurs peuvent aussi contribuer explicitement à indiquer la stabilité de l'application en utilisant le service PendingTasks. Si vous utilisez ces API dans votre application, veillez à appeler une fonction pour marquer la tâche comme terminée.