Entenda o Zoneless do Angular

O Zoneless é um dos temas que mais gera confusão entre os novos desenvolvedores Angular hoje. Não por ser complexo, mas porque entender o que ele muda de verdade depende de ter uma boa base sobre o que veio antes. E esse ponto de partida é o zone.js.

O que é o Zone.js?

O zone.js é uma biblioteca poderosa que o Angular utiliza desde suas primeiras versões para orquestrar a detecção de mudanças (Change Detection). Ele funciona interceptando, através de uma técnica conhecida como monkey patching, as APIs assíncronas nativas do navegador. Isso inclui operações comuns do dia a dia do desenvolvedor, como o uso de setTimeout e setInterval, a adição de ouvintes de eventos com addEventListener, requisições HTTP via XMLHttpRequest ou fetch, e a resolução de Promessas.

Como ele funciona na prática?

Para ilustrar, imagine que você tem um componente com um botão que altera o valor de uma variável após um pequeno atraso.

import { Component } from "@angular/core";



@Component({

  selector: "app-exemplo",

  template: `

    <p>Nome: {{ nome }}</p>

    <button (click)="mudarNome()">Mudar Nome</button>

  `,

})

export class ExemploComponent {

  nome = "Angular";



  mudarNome() {

    setTimeout(() => {

      this.nome = "Zone.js";

    }, 1000);

  }

}

Neste cenário, quando o setTimeout termina sua execução, o zone.js notifica o Angular de que uma operação assíncrona foi concluída. O Angular, por sua vez, assume que o estado da aplicação pode ter mudado e dispara um ciclo de detecção de mudanças em toda a árvore de componentes para atualizar a interface do usuário.

No modo Zoneless, esse mesmo exemplo precisaria de uma pequena adaptação para funcionar. Em vez de uma variável comum, usamos um Signal, que tem a capacidade de notificar o Angular diretamente, independente de onde o .set() é chamado:

import { Component, signal } from "@angular/core";



@Component({

  selector: "app-exemplo",

  template: `

    <p>Nome: {{ nome() }}</p>

    <button (click)="mudarNome()">Mudar Nome</button>

  `,

})

export class ExemploComponent {

  nome = signal("Angular");



  mudarNome() {

    setTimeout(() => {

      this.nome.set("Zoneless"); // O Signal avisa o Angular diretamente

    }, 1000);

  }

}

A diferença é sutil, mas importante: no primeiro exemplo o Angular é avisado pelo zone.js (que monitorou o setTimeout). No segundo, quem avisa é o próprio Signal ao ter seu valor atualizado. Sem o Zone.js e sem o Signal, a interface simplesmente não seria atualizada.

O Problema com o Zone.js

Embora o zone.js facilite o desenvolvimento ao automatizar a detecção de mudanças, ele traz consigo alguns pontos negativos significativos:

1. 
   Performance: O zone.js não sabe exatamente o que mudou, apenas que algo pode ter mudado. Isso faz com que ele dispare a detecção de mudanças em toda a árvore de componentes com mais frequência do que o necessário.


2. 
   Tamanho do Bundle: O zone.js adiciona um peso extra ao bundle inicial (~13kb gzipped) e aumenta o tempo de inicialização.


3. 
   Debug Complexo: As stack traces tornam-se longas e difíceis de ler devido às múltiplas camadas adicionadas pelo Zone.js.


4. 
   Incompatibilidade com APIs Modernas: O zone.js não consegue interceptar nativamente o async/await, forçando o Angular CLI a converter esse código para Promessas.

O que é o Zoneless?

Diferente do que o nome pode sugerir, o Zoneless não se trata apenas de remover a biblioteca zone.js do projeto. Trata-se de uma mudança arquitetural profunda onde o Angular deixa de ser reativo a eventos globais do navegador e passa a ser reativo a notificações explícitas de mudança de estado.

No modo Zoneless, o Angular não fica mais "vigiando" todas as operações assíncronas. Em vez disso, ele atualiza a interface apenas quando recebe um sinal claro de que os dados vinculados ao template foram alterados.

Como funciona por "debaixo dos panos"?

O Zoneless introduz um novo agendador (Scheduler) que agrupa (coalesce) as notificações de mudança para evitar verificações redundantes. O Angular agora depende de gatilhos específicos e explícitos para saber quando rodar a detecção de mudanças:

• 
  Signals: Quando um sinal (Signal) lido em um template é atualizado, ele notifica o Angular diretamente.


• 
  Eventos de Template: Callbacks de ouvintes de eventos vinculados no template (como um (click)) sinalizam que uma interação ocorreu.


• 
  AsyncPipe: O uso do AsyncPipe chama automaticamente o método markForCheck quando novos dados são emitidos.


• 
  Atualizações de Inputs: Quando um @Input() de um componente recebe um novo valor.

Essa abordagem torna a detecção de mudanças extremamente seletiva e eficiente, devolvendo o controle da performance para as mãos do desenvolvedor.

Comparativo: Zone.js vs Zoneless

Para entender a mudança no dia a dia, vamos comparar como os dois modelos se comportam em diferentes situações e quais são suas características técnicas.

Características Gerais

Comportamento em Cenários Práticos

Abaixo, detalhamos onde o Zoneless assume o controle automaticamente e onde você precisará ser mais explícito.

Cenários onde o Zoneless DISPARA normalmente

Nestas situações, o Angular continua atualizando a interface como você já está acostumado:

• 
  Signals: A forma nativa e recomendada; sempre disparam a atualização.


• 
  Eventos de DOM: Cliques, inputs e submissões vinculados no template ((click), (input)).


• 
  Async Pipe: Dispara porque internamente chama o método de notificação necessário.


• 
  Router & Forms: Eventos de navegação e atualizações de formulários reativos continuam funcionando.


• 
  @Inputs: Atualizações via bindings de template ou ComponentRef.setInput().


• 
  Chamadas Explícitas: O uso de ChangeDetectorRef.markForCheck() funciona como esperado.

Cenários onde o Zoneless NÃO dispara automaticamente

Nestes casos, a interface não será atualizada sem intervenção manual ou uso de APIs modernas:

• 
  Subscrições Manuais (Observables/HTTP): Se você alterar uma variável comum dentro de um .subscribe(), o Angular não saberá que algo mudou.


• 
  Timers (setTimeout/setInterval): O fim de um timer não avisa mais o framework automaticamente.


• 
  Promises: A resolução de uma Promise (via .then() ou await) não dispara a atualização.


• 
  Eventos Externos: WebSockets ou ouvintes de eventos globais (ex: window.addEventListener) fora do template.

A correção para esses cenários segue sempre o mesmo raciocínio: ou você troca a variável por um Signal, ou chama markForCheck() do ChangeDetectorRef manualmente. A primeira opção é a mais recomendada:

// Não atualiza a interface no Zoneless

dados: string = '';



ngOnInit() {

  this.meuServico.getData().subscribe(res => {

    this.dados = res;

  });

}



// Com Signal, funciona como esperado

dados = signal('');



ngOnInit() {

  this.meuServico.getData().subscribe(res => {

    this.dados.set(res);

  });

}

Como Ativar o Zoneless

Antes de ativar, é importante entender o estágio de suporte do Zoneless de acordo com a versão do seu projeto:

• 
  Angular v18: Introduziu o recurso em estágio experimental.


• 
  Angular v19: O Angular Material e o CDK tornaram-se compatíveis nativamente com a arquitetura sem zonas.


• 
  Angular v20: O modo Zoneless alcançou o estado estável, pronto para produção.


• 
  Angular v21+: O time do Angular sinalizou que a tendência é tornar o Zoneless o padrão para novos projetos nas próximas versões.

Se você já está em uma versão compatível, o processo de migração envolve três passos simples :

1. 
   Atualize o Bootstrap da Aplicação:
   No seu arquivo app.config.ts, adicione o provider correspondente.
   

import {

  ApplicationConfig,

  provideZonelessChangeDetection,

} from "@angular/core";



export const appConfig: ApplicationConfig = {

  providers: [

    provideZonelessChangeDetection(), // Ativa o modo Zoneless

  ],

};

1. Remova o Zone.js do Build:
   
   No arquivo angular.json, remova as entradas de zone.js da seção polyfills.




2. Desinstale a Dependência:
   
   

   npm uninstall zone.js

Boas Práticas

A migração mais comum é justamente mover variáveis de estado para Signals. É o passo que resolve a maior parte dos problemas e já melhora a performance mesmo antes de remover o Zone.js completamente.

Outra dica prática: se você usa muito ChangeDetectionStrategy.OnPush nos seus componentes, a transição para Zoneless vai ser tranquila o comportamento já é parecido. Se seus componentes ainda estão no modo Default, vale revisar isso antes de ativar o Zoneless.

Por fim, para eventos globais como resize ou scroll, prefira o @HostListener. Ele mantém o evento dentro do contexto do Angular, garantindo que o Zoneless seja notificado normalmente.

Conclusão

O Zoneless representa o futuro do Angular. Ele não apenas resolve problemas históricos de performance, mas também alinha o framework com as APIs modernas da web. Ao entender os cenários de disparo, você ganha total controle sobre a performance da sua aplicação, resultando em um código mais leve, rápido e previsível.

Referências

Angular v18 is now available! - Angular Blog

Angular without ZoneJS (Zoneless) - Angular Documentation