Description

This warning occurs when hydration is enabled on the client but the NgZone remains unstable for a long period of time.

The ApplicationRef#isStable API uses NgZone to report when an application becomes stable and unstable. An application is considered stable when there are no pending microtasks or macrotasks.

Angular Hydration relies on a signal from Zone.js when it becomes stable inside an application:

• during the server-side rendering (SSR) to start the serialization process
• in a browser this signal is used to start the post-hydration cleanup to remove DOM nodes that remained unclaimed

This warning is displayed when the ApplicationRef.isStable() doesn't emit true within 10 seconds. If this is intentional and your application becomes stable later, you can ignore this warning.

Macrotasks

Macrotasks include functions like setInterval, setTimeout, requestAnimationFrame etc. If one of these functions is called in the initialization phase of the app or the bootstrapped components, the application will remain unstable.

@Component({
  standalone: true,
  selector: 'app',
  template: ``,
})
class SimpleComponent {
    constructor() {
        setInterval(() => { ... }, 1000)

        // or 

        setTimeout(() => { ... }, 10_000)
    }
}

If these functions need to be called in the initialization phase, invoking them outside the angular zone solves the issue.

class SimpleComponent {
    constructor() {
      inject(NgZone).runOutsideAngular(() => {
        setInterval(() => {}, 1000);
      })
    }
}