angular/aio/content/errors/NG0506.md

@name NgZone remains unstable 
@category runtime
@shortDescription NgZone remains unstable after a long period of time

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

The {@link 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. 

```typescript
@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.  

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

@debugging

Verify that you don't have any long standing microtask or macrotasks.