mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
9afd90c59d
Hydration requires a stable App to run some logic. With this warning developers will be informed about potential issues encountered when running an unstable app. Fixes #50285 PR Close #50295
53 lines
No EOL
1.8 KiB
Markdown
53 lines
No EOL
1.8 KiB
Markdown
@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. |