Este aviso só aparece no browser durante o processo de hydration quando está ativado no client mas a aplicação permanece instável por um período prolongado de tempo (mais de 10 segundos).
Tipicamente isso acontece quando há algumas microtasks ou macrotasks pendentes em uma página.
A Hydration do Angular depende de um sinal do ApplicationRef.isStable quando ele se torna estável dentro de uma aplicação:
- durante a renderização do lado do servidor (SSR) para iniciar o processo de serialização
- em um browser este sinal é usado para iniciar a limpeza pós-hydration para remover nodes DOM que permaneceram não reivindicados
Este aviso é exibido quando ApplicationRef.isStable não emite true dentro de 10 segundos. Se este comportamento é intencional e sua aplicação estabiliza mais tarde, você pode optar por ignorar este aviso.
Aplicações que usam zone.js
Aplicações que usam zone.js podem ter vários fatores contribuindo para atrasos na estabilidade. Isso pode incluir requisições HTTP pendentes, timers (setInterval, setTimeout) ou alguma lógica que invoca continuamente requestAnimationFrame.
Macrotasks
Macrotasks incluem funções como setInterval, setTimeout, requestAnimationFrame, etc.
Se uma dessas funções for chamada durante a fase de inicialização da aplicação ou em components inicializados, isso pode atrasar o momento em que a aplicação se torna estável.
@Component({ selector: 'app', template: ``,})class SimpleComponent { constructor() { setInterval(() => { ... }, 1000) // or setTimeout(() => { ... }, 10_000) }}Se essas funções devem ser chamadas durante a fase de inicialização, invocá-las fora da zone do Angular resolve o problema:
class SimpleComponent { constructor() { const ngZone = inject(NgZone); ngZone.runOutsideAngular(() => { setInterval(() => {}, 1000); }); }}Bibliotecas de terceiros
Algumas bibliotecas de terceiros também podem produzir tarefas assíncronas de longa duração, o que pode atrasar a estabilidade da aplicação. A recomendação é invocar o código relevante da biblioteca fora da zone conforme descrito acima.
Executando código após uma aplicação se tornar estável
Você pode executar um código que configura tarefas assíncronas uma vez que uma aplicação se torna estável:
class SimpleComponent { 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(() => { ... }); }); }}Aplicações zoneless
Em cenários zoneless, a estabilidade pode ser atrasada por um código da aplicação dentro de um effect executando em um loop infinito (potencialmente porque os signals usados nas funções do effect continuam mudando) ou uma requisição HTTP pendente.
Desenvolvedores também podem contribuir explicitamente para indicar a estabilidade da aplicação usando o serviço PendingTasks. Se você usa as APIs mencionadas em sua aplicação, certifique-se de invocar uma função para marcar a tarefa como concluída.