What is Zone.js and what does "zoneless" Angular mean?

Question

Accepted Answer

**Zone.js** is a library Angular has historically used to know **when to run change detection**. It patches browser async APIs so Angular can automatically detect any event that might change state. **Zoneless** Angular removes this dependency, relying on signals and explicit notifications instead.

## What Zone.js does

```text
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.
```

This is the "magic" behind Angular's automatic updates: you change a property after an HTTP response or a click, and the view just updates — because Zone.js told Angular that an async event completed.

```ts
// you write this, and the view updates automatically — thanks to Zone.js:
setTimeout(() => { this.message = "Updated"; }, 1000); // Zone.js triggers CD
```

## The downsides of Zone.js

```text
✗ 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
```

Because Zone.js can't tell *what* changed, it triggers a full change-detection pass on many events — inefficient for large apps.

## Zoneless Angular (signals-based)

```ts
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()], // no Zone.js
});
```

In zoneless mode, Angular doesn't rely on patched async APIs. Instead, change detection is triggered **explicitly** — primarily by **signals** (which notify Angular precisely when their value changes), plus the `async` pipe, events, and `markForCheck()`.

```ts
count = signal(0);
increment() { this.count.set(this.count() + 1); } // the signal tells Angular what changed → fine-grained update
```

## Benefits of going zoneless

```text
✓ 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)
```

## Why it matters

Zone.js explains Angular's longstanding "automatic" change detection — and its cost (bundle size, broad/imprecise checking).

The move to **zoneless**, powered by **signals**, is a major architectural shift: it makes updates fine-grained and explicit, shrinks the bundle, and improves performance.

Understanding both — why Zone.js existed and what replaces it — is increasingly important as Angular steers toward a signals-based, zoneless future as the default.