@@ -30,9 +30,13 @@ export class AppModule {}
3030
3131## ZoneJSの削除
3232
33- Zonelessアプリケーションは、バンドルサイズを削減するために、ビルドからZoneJSを完全に削除する必要があります。ZoneJSは通常、` angular.json ` の` polyfills ` オプションを介して、` build ` と` test ` の両方のターゲットでロードされます。ビルドから削除するには、両方から` zone.js ` と` zone.js/testing ` を削除します。明示的な` polyfills.ts ` ファイルを使用するプロジェクトは、ファイルから` import 'zone.js'; ` と` import 'zone.js/testing'; ` を削除する必要があります。
33+ Zonelessアプリケーションは、バンドルサイズを削減するために、ビルドからZoneJSを完全に削除する必要があります。ZoneJSは通常、
34+ ` angular.json ` の` polyfills ` オプションを介して、` build ` と` test ` の両方のターゲットでロードされます。ビルドから削除するには、
35+ 両方から` zone.js ` と` zone.js/testing ` を削除します。明示的な` polyfills.ts ` ファイルを
36+ 使用するプロジェクトは、ファイルから` import 'zone.js'; ` と` import 'zone.js/testing'; ` を削除する必要があります。
3437
35- ビルドからZoneJSを削除すると、` zone.js ` の依存関係も不要になり、パッケージを完全に削除できます。
38+ ビルドからZoneJSを削除すると、` zone.js ` の依存関係も不要になり、
39+ パッケージを完全に削除できます。
3640
3741``` shell
3842npm uninstall zone.js
@@ -51,7 +55,8 @@ Angularは、変更検知をいつ、どのビューで実行するかを判断
5155
5256### ` OnPush ` 互換コンポーネント
5357
54- コンポーネントが上記の正しい通知メカニズムを使用していることを確認する1つの方法は、[ ChangeDetectionStrategy.OnPush] ( /best-practices/skipping-subtrees#using-onpush ) を使用することです。
58+ コンポーネントが上記の正しい通知メカニズムを使用していることを確認する1つの方法は、
59+ [ ChangeDetectionStrategy.OnPush] ( /best-practices/skipping-subtrees#using-onpush ) を使用することです。
5560
5661` OnPush ` 変更検知戦略は必須ではありませんが、アプリケーションコンポーネントのZoneless互換性への推奨されるステップです。ライブラリコンポーネントが` ChangeDetectionStrategy.OnPush ` を使用することが常に可能であるとは限りません。
5762ライブラリコンポーネントが` ChangeDetectionStrategy.Default ` を使用する可能性のあるユーザーコンポーネントのホストである場合、子コンポーネントが` OnPush ` 互換ではなく、ZoneJSに依存して変更検知をトリガーする場合、子コンポーネントが更新されなくなるため、` OnPush ` を使用できません。コンポーネントは、変更検知を実行する必要があるときにAngularに通知する限り(` markForCheck ` の呼び出し、シグナルの使用、` AsyncPipe ` など)、` Default ` 戦略を使用できます。
@@ -71,12 +76,17 @@ Angularは、変更検知をいつ、どのビューで実行するかを判断
7176` MutationObserver ` など、より簡単または直接的なDOM APIを代わりに使用できます。
7277
7378<docs-callout title =" NgZone.run and NgZone.runOutsideAngular are compatible with Zoneless " >
74- ` NgZone.run ` と` NgZone.runOutsideAngular ` は、コードをZonelessアプリケーションと互換性を持たせるために削除する必要はありません。実際、これらの呼び出しを削除すると、ZoneJSに依然として依存しているアプリケーションで使用されるライブラリのパフォーマンスが低下する可能性があります。
79+ ` NgZone.run ` と` NgZone.runOutsideAngular ` は、コードをZonelessアプリケーションと互換性を持たせるために
80+ 削除する必要はありません。実際、これらの呼び出しを削除すると、ZoneJSに依然として依存しているアプリケーションで使用されるライブラリの
81+ パフォーマンスが低下する可能性があります。
7582</docs-callout >
7683
7784### サーバーサイドレンダリング(SSR)の` PendingTasks `
7885
79- AngularでSSRを使用している場合、アプリケーションが「安定」しており、シリアライズできるかどうかを判断するために、ZoneJSに依存していることをご存知かもしれません。シリアライズを妨げる非同期タスクがある場合、ZoneJSを使用していないアプリケーションは、` PendingTasks ` サービスを使用してAngularにこれらを認識させる必要があります。シリアライズは、保留中のすべてのタスクが削除された最初の瞬間まで待機します。
86+ AngularでSSRを使用している場合、アプリケーションが「安定」しており、シリアライズできるかどうかを判断するために、
87+ ZoneJSに依存していることをご存知かもしれません。シリアライズを妨げる非同期タスクがある場合、
88+ ZoneJSを使用していないアプリケーションは、` PendingTasks ` サービスを使用してAngularにこれらを認識させる必要があります。シリアライズは、
89+ 保留中のすべてのタスクが削除された最初の瞬間まで待機します。
8090
8191``` typescript
8292const taskService = inject (PendingTasks );
@@ -85,13 +95,16 @@ await doSomeWorkThatNeedsToBeRendered();
8595taskCleanup ();
8696```
8797
88- フレームワークは、非同期タスクが完了するまでシリアライズを防ぐために、このサービスを内部的にも使用します。これには、進行中のルーターナビゲーションや未完了の` HttpClient ` リクエストが含まれますが、これらに限定されません。
98+ フレームワークは、非同期タスクが完了するまでシリアライズを防ぐために、このサービスを内部的にも使用します。これには、
99+ 進行中のルーターナビゲーションや未完了の` HttpClient ` リクエストが含まれますが、これらに限定されません。
89100
90101## テストとデバッグ
91102
92103### ` TestBed ` でZonelessを使用する
93104
94- Zonelessプロバイダー関数は、` TestBed ` でも使用して、テスト対象のコンポーネントがZoneless Angularアプリケーションと互換性があることを確認できます。
105+ Zonelessプロバイダー関数は、` TestBed ` でも使用して、
106+ テスト対象のコンポーネントがZoneless Angularアプリケーションと
107+ 互換性があることを確認できます。
95108
96109``` typescript
97110TestBed .configureTestingModule ({
@@ -102,8 +115,17 @@ const fixture = TestBed.createComponent(MyComponent);
102115await fixture .whenStable ();
103116```
104117
105- テストが本番コードと最も類似した動作をすることを確認するには、可能な限り` fixture.detectChanges() ` の使用を避けてください。これにより、Angularが変更検知をスケジュールしていない場合に、変更検知が強制的に実行されます。テストでは、これらの通知が発生していることを確認し、テストで手動で強制的に発生させるのではなく、Angularが状態を同期するタイミングを処理できるようにする必要があります。
118+ テストが本番コードと最も類似した動作をすることを確認するには、
119+ 可能な限り` fixture.detectChanges() ` の使用を避けてください。これにより、
120+ Angularが変更検知をスケジュールしていない場合に、
121+ 変更検知が強制的に実行されます。テストでは、これらの通知が発生していることを確認し、
122+ テストで手動で強制的に発生させるのではなく、
123+ Angularが状態を同期するタイミングを処理できるようにする必要があります。
106124
107125### 更新が検出されることを確認するためのデバッグモードチェック
108126
109- Angularは、アプリケーションがZoneless互換の方法で状態を更新していることを確認するのに役立つ追加のツールも提供しています。` provideExperimentalCheckNoChangesForDebug ` を使用すると、通知なしにバインディングが更新されていないことを定期的に確認できます。Zoneless変更検知によって更新されなかった更新されたバインディングがある場合、Angularは` ExpressionChangedAfterItHasBeenCheckedError ` をスローします。
127+ Angularは、アプリケーションがZoneless互換の方法で状態を更新していることを
128+ 確認するのに役立つ追加のツールも提供しています。` provideExperimentalCheckNoChangesForDebug ` を 使用すると、
129+ 通知なしにバインディングが更新されていないことを
130+ 定期的に確認できます。Zoneless変更検知によって更新されなかった更新されたバインディングがある場合、 Angularは` ExpressionChangedAfterItHasBeenCheckedError ` を
131+ スローします。
0 commit comments