Zone-Based Scheduling

## The problem zone.js solves Angular templates are bound to plain component fields in older code: `{{ remaining }}` reads `this.remaining`. JavaScript has no built-in way to observe an assignment to a plain field, so something must decide **when** to re-check the bindings. Before signals, Angular's answer was: re-check after any asynchronous callback finishes, because that is when state may have changed. `zone.js` is the library that makes "after any asynchronous callback" observable. ## What zone.js patches When the `zone.js` polyfill loads, it replaces browser APIs with wrappers that remember which **zone** scheduled the work and run the callback inside it. Its browser and common patches include: - **Timers:** `setTimeout`, `setInterval` and their clear functions - **Promises:** the global `Promise` is replaced by a zone-aware implementation - **Events:** `addEventListener` on `EventTarget` - **Network:** `XMLHttpRequest` and `fetch` - **Frames and observers:** `requestAnimationFrame`, `MutationObserver`, `ResizeObserver`, `IntersectionObserver` - **Others:** `queueMicrotask`, `FileReader`, `customElements`, geolocation, and more Native `async`/`await` cannot be patched effectively; the Angular docs note that it must be down-levelled to work with zone.js. ## From callback to tick ```ts import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'app-countdown', template: `<p>{{ remaining }} s</p>`, // Eager was the implicit default before v22; new components are OnPush. changeDetection: ChangeDetectionStrategy.Eager, }) export class Countdown { remaining = 10; constructor() { const step = () => { this.remaining--; if (this.remaining > 0) setTimeout(step, 1000); }; setTimeout(step, 1000); } } ``` With zone-based change detection and an `Eager` component, each timer callback follows the same path: 1. The patched `setTimeout` fires the callback **inside the Angular zone**. 2. `NgZone` marks itself unstable on entry and emits `onUnstable` if it was stable. 3. The callback decrements `remaining`. 4. On exit, if no microtasks are pending, `NgZone` emits **`onMicrotaskEmpty`**. 5. Angular's zone scheduler, subscribed to that event, calls **`ApplicationRef.tick()`**. 6. `tick()` walks the view tree from the root, refreshing `Eager` views and dirty `OnPush` views, and updates any binding whose value changed. 7. `NgZone` then emits `onStable`. ## What the zone does not know | zone.js knows | zone.js does not know | |---|---| | a patched callback ran in the Angular zone | whether it changed any state | | the microtask queue is now empty | which components depend on the change | | | anything about work started outside the Angular zone | That gap is why zone-based apps start a tree-wide check after every patched event, including a `mousemove` that changed nothing. `OnPush` limits **which** views a tick refreshes; it does not reduce **how often** ticks happen. ## The version picture - Up to v20, zone-based change detection was the default for applications. - Since **v21**, **zoneless** is the default. An app gets the zone scheduler only when it calls `provideZoneChangeDetection()` (in `bootstrapApplication` providers, or `applicationProviders` for `bootstrapModule`) and loads `zone.js` as a polyfill. The v21 update added the provider to existing apps automatically. - Since **v22**, components without a `changeDetection` value are `OnPush`, so a tick no longer refreshes a new component whose plain field changed in a timer unless something marks it dirty. For the countdown today, a `signal()` updated in the timer works in both modes: the signal write marks the reading view and notifies the scheduler. ## Why the Angular zone matters A **zone** is an execution context that survives across asynchronous boundaries: a callback scheduled inside a zone runs inside that same zone later. Angular forks its own child zone at bootstrap and runs the application in it, so everything the app schedules (timers, listeners attached through templates, HTTP calls) inherits the Angular zone. Two consequences follow: - Work started **inside** the Angular zone ends with an `onMicrotaskEmpty` check and, usually, a tick. - Work started **outside** it, for example by a third-party library initialised in a parent zone, does not trigger the zone scheduler. Angular's hybrid scheduler (since v18) still schedules a tick when such code writes a signal or calls `markForCheck()`, but a plain field assignment there goes unnoticed. This is why "it works when I click, but not when the library's callback fires" is a classic zone.js bug report. ## Interview summary zone.js intercepts async APIs, NgZone reports when the Angular zone's microtasks drain, and Angular answers with `ApplicationRef.tick()`. It is a "something may have changed" signal, which is both its convenience and its cost.