Angular Fundamentals - Zoneless

Introdução

Durante muitos anos o Angular utilizou uma biblioteca chamada Zone.js para descobrir quando precisava atualizar a interface.

Sempre que ocorria um evento assíncrono, o Angular era notificado e executava o processo de Change Detection.

Com a chegada dos Signals, o framework passou a caminhar para um novo modelo chamado Zoneless.

O que é Zone.js?

Exemplos de operações monitoradas:

setTimeout(() => {});
setInterval(() => {});
fetch("/api/users");
button.addEventListener("click", () => {});
Promise.resolve();

Sempre que algo acontecia, o Angular executava o Change Detection.

O problema do Zone.js

O modelo funciona bem, mas possui um custo.

Imagine uma aplicação com centenas de componentes.

App
├── Header
├── Sidebar
├── Dashboard
├── Charts
├── Table
└── Footer

Quando ocorre um clique simples:

Usuário clicou em um botão
↓
Zone.js detecta
↓
Angular executa Change Detection
↓
Árvore inteira é verificada

Mesmo quando apenas um pequeno trecho da tela mudou.

O que é Zoneless?

Isso é possível graças ao uso de Signals e mecanismos modernos de reatividade.

Como os Signals ajudam?

Antes:

Evento
↓
Zone.js
↓
Change Detection
↓
Árvore inteira

Agora:

Signal alterado
↓
Angular sabe quem depende dele
↓
Atualiza apenas os consumidores

Exemplo:

const count = signal(0);
 
count.set(1);

O Angular sabe exatamente quais componentes utilizam esse Signal.

Benefícios do Zoneless

Menor bundle

Removendo o Zone.js, a aplicação carrega menos código.

Menos trabalho desnecessário

Ao invés de verificar toda a árvore de componentes:

App
├── Header
├── Sidebar
├── Dashboard
└── Footer

o Angular atualiza apenas quem realmente depende do estado alterado.

Melhor integração com Signals

Signals fornecem rastreamento granular de dependências.

Isso combina perfeitamente com o modelo Zoneless.

Como habilitar?

No Angular 21 e posteriores, Zoneless é o comportamento padrão. Verifique apenas se o projeto não usa provideZoneChangeDetection() para restaurar o modo baseado em Zone.js.

No Angular 20, habilite explicitamente no bootstrap:

import { provideZonelessChangeDetection } from "@angular/core";
 
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()],
});

Depois, remova zone.js e zone.js/testing dos polyfills de build e teste. A configuração isolada não entrega a redução de bundle enquanto a dependência continuar carregada.

O que muda para o desenvolvedor?

Grande parte do código continua igual.

Porém algumas práticas tornam-se mais importantes:

• Utilizar Signals
• Evitar mutações silenciosas
• Preferir estado reativo
• Entender melhor o fluxo de atualização da UI

Zoneless e OnPush

Uma dúvida comum.

Comparação

Fluxo visual

Angular tradicional

Evento
↓
Zone.js
↓
Change Detection
↓
Verificação da árvore

Angular Zoneless

Signal
↓
Dependências rastreadas
↓
Atualização específica

Casos de Uso

Perguntas técnicas

Pergunta técnica para revisão

Conclusão

Zoneless reduz a dependência de interceptação global ao apoiar a atualização granular da interface. A adoção deve considerar que Zone.js continua suportado e presente em muitas aplicações.