Zone.js は、Angular が 変更検出をいつ実行するかを知る ために歴史的に使用してきたライブラリです。ブラウザの非同期 API にパッチを当てることで、Angular は状態を変更する可能性のあるイベントを自動的に検出できます。Zoneless Angular はこの依存性を削除し、代わりに signals と明示的な通知に依存します。
Zone.js monkey-patches async APIs: setTimeout, addEventListener, Promise,
XHR/fetch, etc. When any of them fires, Zone.js notifies Angular →
Angular runs change detection automatically.
これが Angular の自動更新の「魔法」です：HTTP レスポンスまたはクリックの後にプロパティを変更すると、Zone.js が Angular に非同期イベントが完了したことを伝えたために、ビューが更新されます。
// you write this, and the view updates automatically — thanks to Zone.js:
setTimeout(() => { this.message = "Updated"; }, 1000); // Zone.js triggers CD
✗ Overhead — patches everything, and triggers CD broadly (checks the whole tree)
✗ ~100KB added to the bundle
✗ Imprecise — runs change detection even when nothing relevant changed
✗ Can be confusing with third-party code that runs outside Angular's zone
Zone.js は 何が 変更されたのかを判断できないため、多くのイベントに対して完全な変更検出パスをトリガーします — 大規模なアプリケーションにとっては非効率です。
bootstrapApplication(AppComponent, {
providers: [provideZonelessChangeDetection()], // no Zone.js
});
zoneless モードでは、Angular はパッチされた非同期 API に依存しません。代わりに、変更検出は 明示的に トリガーされます — 主に signals（値が変更されたときに Angular に正確に通知する）、加えて async パイプ、イベント、および markForCheck() によって。
count = signal(0);
increment() { this.count.set(this.count() + 1); } // the signal tells Angular what changed → fine-grained update
✓ Smaller bundle (drop ~100KB Zone.js)
✓ Better performance — fine-grained, precise updates (only what depends on changed signals)
✓ Cleaner integration with non-Angular code
✓ Simpler debugging (no zone-related stack noise)
Zone.js は Angular の長年の「自動」変更検出を説明します — そしてそのコスト（バンドルサイズ、広範で不正確なチェック）。
Zoneless への移行は signals によって支えられ、大きなアーキテクチャの転換です：更新をきめ細かく明示的にし、バンドルを縮小し、パフォーマンスを向上させます。
両方を理解すること — Zone.js が存在した理由とそれを置き換えるもの — は、Angular がデフォルトとして signals ベースの zoneless 未来に向かい続ける中で、ますます重要になっています。