この警告は、クライアント側で有効になっている場合、ハイドレーションプロセス中にブラウザにのみ表示され、アプリケーションが長時間（10秒以上）不安定なままの場合に表示されます。
通常、これはページに保留中のマイクロタスクまたはマクロタスクがある場合に発生します。
Angularハイドレーションは、アプリケーション内で安定状態になったときに ApplicationRef.isStable からの信号に依存します。
- サーバーサイドレンダリング（SSR）中は、シリアル化プロセスを開始します
- ブラウザでは、この信号を使用して、請求されなかったDOMノードを削除するハイドレーション後のクリーンアップを開始します
この警告は、ApplicationRef.isStable が10秒以内に true を出力しない場合に表示されます。この動作が意図的なもので、アプリケーションが後で安定する場合、この警告を無視できます。
zone.jsを使用するアプリケーション
zone.jsを使用するアプリケーションでは、安定性の遅延に寄与するさまざまな要因がある可能性があります。これには、保留中のHTTPリクエスト、タイマー（setInterval、setTimeout）、または requestAnimationFrame を継続的に呼び出すロジックが含まれる場合があります。
マクロタスク
マクロタスクには、setInterval、setTimeout、requestAnimationFrame などの関数が含まれます。
これらの関数のいずれかがアプリケーションの初期化フェーズ中に、またはブートストラップされたコンポーネント内で呼び出されると、アプリケーションが安定状態になる瞬間が遅れる可能性があります。
@Component({ standalone: true, selector: 'app', template: ``,})class SimpleComponent { constructor() { setInterval(() => { ... }, 1000) // or setTimeout(() => { ... }, 10_000) }}
これらの関数を初期化フェーズ中に呼び出す必要がある場合、Angularゾーンの外で呼び出すと、問題は解決します。
class SimpleComponent { constructor() { const ngZone = inject(NgZone); ngZone.runOutsideAngular(() => { setInterval(() => {}, 1000); }); }}
サードパーティライブラリ
サードパーティライブラリの一部は、アプリケーションの安定性を遅らせる可能性のある長時間実行される非同期タスクを生成することもあります。推奨事項として、上記の例のように、関連するライブラリコードをゾーンの外で呼び出すことをお勧めします。
アプリケーションが安定状態になった後にコードを実行する
アプリケーションが安定状態になったときに非同期タスクを設定するコードを実行できます。
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(() => { ... }); }); }}
ゾーンレスアプリケーション
ゾーンレスシナリオでは、無限ループで実行される effect 内のアプリケーションコード（効果関数の使用されているシグナルが継続的に変化しているため）または保留中のHTTPリクエストによって、安定性が遅れる可能性があります。
開発者は、実験的な PendingTasks サービスを使用して、アプリケーションの安定性を明示的に示すにも貢献できます。上記APIをアプリケーションで使用する場合、タスクが完了したことをマークする関数を呼び出すようにしてください。