O que é Zone.js e o que significa Angular "zoneless"?

Question

Accepted Answer

**Zone.js** é uma biblioteca que Angular historicamente usou para saber **quando executar change detection**. Ela aplica patches em APIs assíncronas do navegador para que Angular possa detectar automaticamente qualquer evento que possa alterar o estado. **Zoneless** Angular remove essa dependência, confiando em signals e notificações explícitas.

## O que Zone.js faz

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

Esta é a "magia" por trás das atualizações automáticas do Angular: você altera uma propriedade após uma resposta HTTP ou um clique, e a view apenas se atualiza — porque Zone.js disse ao Angular que um evento assíncrono foi concluído.

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

## As desvantagens do 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
```

Como Zone.js não consegue dizer *o que* mudou, ele dispara uma passagem completa de change detection em muitos eventos — ineficiente para aplicativos grandes.

## Angular Zoneless (baseado em signals)

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

No modo zoneless, Angular não depende de APIs assíncronas com patches. Em vez disso, change detection é disparado **explicitamente** — principalmente por **signals** (que notificam Angular precisamente quando seu valor muda), além do pipe `async`, eventos e `markForCheck()`.

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

## Benefícios de ir 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)
```

## Por que isso importa

Zone.js explica a longínqua detecção de mudanças "automática" do Angular — e seu custo (tamanho do bundle, verificação ampla/imprecisa).

A mudança para **zoneless**, impulsionada por **signals**, é uma mudança arquitetônica importante: torna as atualizações granulares e explícitas, reduz o bundle e melhora o desempenho.

Compreender ambos — por que Zone.js existia e o que o substitui — é cada vez mais importante conforme Angular segue em direção a um futuro signals-based e zoneless como padrão.