The Modern Angular Runtime: Inside Signals, Zoneless, and the Push-Pull Engine

For nearly a decade, Angular’s reactivity model relied on a clever but heavy-handed architectural choice: Zone.js. By monkey-patching asynchronous browser APIs (such as setTimeout, native Promises, and DOM event listeners), Angular ensured that the user interface stayed in sync automatically.
However, this convenience introduced a fundamental flaw: Zone.js only knew when an asynchronous macro- or microtask finished; it had zero insight into what data actually changed. To remain safe, Angular had to perform a top-down sweep of the entire component tree, checking every data binding.
Modern Angular delivers a complete structural redesign. By combining fine-grained Signals with a native Zoneless runtime environment, Angular has replaced speculative tree-checking with pinpoint precision.

1. The Reactive Graph: Producers and Consumers

At the core of this modern engine is a Directed Acyclic Graph (DAG). A signal is not just a standard variable holding a value—it is a distinct topological structural node. The nodes within this framework are split into two primary primitives: Producers and Consumers.

  PRODUCER: signal()    ------------>  CONSUMER: template    
  (Holds raw state)     <------------  (Reads state representation)

• Producers: Represent sources of values that change over time. Writable signals (signal()) are pure producers.
• Consumers: Intercept and register an interest in those changing values. Primitives like effect() and the template renderer are active consumers.
• Computed Nodes: Hybrids created via computed(). They function simultaneously as consumers (tracking upstream dependencies) and producers (memoizing a derived output for downstream nodes).

Automatic Context Capture

Dependency tracking runs with zero syntax overhead through a single global state machine variable called activeConsumer. When a consumer (like an effect or component template view) prepares to run, it assigns itself to this global space.
When a producer signal getter is subsequently executed inside that function block, it checks the activeConsumer register and establishes a bidirectional runtime link via producerAccessed(node).
This context mapping is fully dynamic. If a conditional if statement bypasses a signal read on run #2, that specific dependency link is dropped from the graph immediately.

The Await Trap

Because tracking relies on synchronous execution tracking, asynchronous operations break the graph logic.

// ❌ BROKEN GRAPH CONFIGURATION
effect(async () => {
  const data = await fetchUser(); // Execution thread yields here
  console.log(theme());           // ⚠️ NOT TRACKED: activeConsumer has reset to null!
});

When the code hits an await statement, execution pauses and control returns to the main browser thread. By the time the microtask resolves and the code proceeds, activeConsumer has already reset to null.
To fix this, always pull signal dependencies synchronously before crossing the first asynchronous boundary:

//  CORRECT PATTERN
effect(async () => {
  const currentTheme = theme();   // Tracked synchronously while activeConsumer is set
  const data = await fetchUser();
  console.log(currentTheme);
});

2. The Invalidation Cycle: Lazy Pull + Versioning

Traditional reactive stream setups (like RxJS) push data down individual pipelines. If a source node forks into multiple derived pipelines that converge down into a single child node, independent push events can arrive out of phase, causing a temporary invalid state or redundant re-calculation known as a glitch.
Angular bypasses this through an optimized Push-Pull Invalidation Model.

[ Writable signal.set() ]
            │
            ▼
[ Version increments; dirty flag pushed downstream  (Eager Invalidation)]
            │
            ▼
[ Consumer reads computed node ]
            │
            ▼
[ Node pulls upstream version matching to verify state  (Lazy Pull)]

1. The Eager Push (Invalidation): When state changes via mySignal.set(val), the node increments an internal integer version number and sends a simple "dirty" notification flag down its consumer links. No complex derived calculations execute during this step.
2. The Lazy Pull (Evaluation): Recomputation is deferred until a consumer requests the data. When an active template view reads a computed node, the node checks its upstream dependency versions. If the version integers match its last stored compute run record, it re-uses its memoized cache instantly without calculating a thing.

This design introduces a crucial state optimization: Live vs. Non-Live Consumers.
If a computed signal sits in a background service and is not actively read by a template or a live effect, it enters a Non-Live state. You can mutate its upstream source signals thousands of times, and the computed function will remain completely idle until a live element wakes it up by requesting a fresh read.

3. Going Zoneless: Explicit, Event-Driven Change Detection

By dropping Zone.js with provideZonelessChangeDetection(), Angular changes when change detection triggers and which components are scrutinized. The framework shifts from a speculative background poll to a strict, event-driven contract.

 [ Zone.js Architecture ]                    [ Zoneless Architecture ]
  Any Async Task Resolves                      Explicit Graph Event Only
            │                                             │
            ▼                                             ▼
  Check Whole Component Tree                     Check ONLY Affected Views
 (Top-Down Guesswork Pass)                      (Laser-Pointed Target Pass)

In a pure zoneless application where no signals are used yet, the framework relies on three explicit triggers to schedule a microtask frame check:

1. Native Template Event Listeners: Standard user actions declared via (click) or (input) are compiled directly into internal framework event hooks. Angular runs the callback and alerts the scheduler to process a view update frame.
2. The AsyncPipe (| async): Traditional RxJS streams remain functional because the AsyncPipe calls ChangeDetectorRef.markForCheck() natively upon every emission, which forces a scheduled zoneless loop refresh.
3. Component @Input() Updates: State reference mutations driven across component boundaries cascade view checks predictably during update passes.

The Zoneless Footgun

If state updates happen inside background callbacks without a signal or an explicit trigger, the UI will break silently.

// ❌ FAIL: Variable updates in memory, but view stays completely stale
ngOnInit() {
  setTimeout(() => {
    this.username = 'Alex'; // Bypasses the Zoneless scheduler completely!
  }, 2000);
}

Because a vanilla setTimeout callback doesn't communicate with the modern scheduler, the variable updates in memory while the user-facing DOM element skips its layout loop pass.
To fix this legacy pattern without an immediate Signals refactor, inject ChangeDetectorRef and call it explicitly:

//  REPAIRED WITH EXPLICIT NOTIFICATIONprivate cdr = inject(ChangeDetectorRef);

ngOnInit() {
  setTimeout(() => {
    this.username = 'Alex';
    this.cdr.markForCheck(); // Queues a coalesced framework loop pass
  }, 2000);
}

4. Ivy Engine Integration: The Join

The final coordination occurs inside Ivy's compiled template infrastructure. Ivy coordinates components by splitting layout files into two structural definitions: TView and LView.

• TView (Template View): The immutable structural blueprint. There is exactly one TView instance per component type class, containing static instructions and execution metadata shared by all instances.
• LView (Logical View): The live, mutable data instance. There is one LView per component instantiation, directly storing physical variable data bindings, native DOM element node strings, and active signal graph attachments.

When a template is compiled, its update instructions run inside the view's active reactive context. This means that every single signal call written inside an HTML layout functions as a dynamic consumer read, linking that specific signal directly to the active LView instance.

[ signal.set()] ──> [ Version++ ] ──> [ Flag LView ReactiveViewConsumer ]
                                                     │
                                                     ▼
[ Only Changed Bindings ──> DOM ] <── [ Global Coalesced Scheduler Tick ]

When a signal value shifts:

1. The producer increments its version integer and flags its live template consumer (ReactiveViewConsumer).
2. The engine runs markAncestorsForTraversal(), flipping dirty bits up the ancestor chain purely for the component path holding that specific LView instance.
3. The framework’s global scheduler catches this explicit notification and schedules a microtask frame check. Simultaneous data mutations are coalesced into a single optimized frame.
4. When the scheduled loop executes, Angular completely skips clean component tree subtrees, executing update code blocks solely for the pinpointed views flagged by the graph.

This design prioritizes efficiency: tracking targets the View level (the structural component layout template) rather than maintaining individual graph pathways for every single HTML data attribute or text node. Managing separate, fine-grained connections for every DOM text binding would generate massive memory overhead, whereas view-level granularity strikes an optimal balance between low memory footprints and near-instant computational performance.