Angular sem zonas
Execute o Angular sem Zone.js.
Angular sem zonas é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Além do Zone.js
O Zone.js adiciona sobrecarga e modifica APIs globais. O Angular moderno oferece um modo sem zonas, no qual a detecção de mudanças é orientada por signals e notificações explícitas, em vez da modificação de zonas.
Ativando o modo sem zonas
Forneça o provedor de detecção de mudanças sem zonas na configuração de inicialização.
bootstrapApplication(AppComponent, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});Removendo o Zone.js
No modo sem zonas, você também remove o polyfill zone.js da configuração de compilação, reduzindo o tamanho do pacote e o custo de inicialização.
// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'O que dispara a detecção agora?
Sem zonas, o Angular agenda a detecção de mudanças quando: um signal lido em um modelo muda, um pipe async emite um valor, uma associação de evento é disparada ou markForCheck() é chamado.
Signals são fundamentais
Aplicativos sem zonas dependem muito de signals para o estado. Ler um signal em um modelo cria uma dependência; atualizá-lo notifica o Angular para atualizar essa visualização.
count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CDOs eventos continuam notificando
As associações de eventos do modelo notificam o Angular diretamente, portanto as interações do usuário continuam atualizando a interface sem zonas.
<button (click)="count.update(c => c + 1)">+</button>Assíncrono sem zonas
O setTimeout simples ou o código assíncrono que não usa signals não dispara mais a detecção automaticamente. Envolva esse estado em signals ou chame markForCheck().
setTimeout(() => this.ready.set(true), 1000);Compatibilidade do pipe async
O pipe async continua funcionando no modo sem zonas porque marca explicitamente a visualização para verificação a cada emissão.
<p>{{ data$ | async }}</p>Bibliotecas de terceiros
Algumas bibliotecas pressupunham a detecção automática do Zone.js. No modo sem zonas, talvez seja necessário envolver as funções de retorno delas para atualizar um signal ou chamar markForCheck() manualmente.
Benefícios
O modo sem zonas significa pacotes menores, inicialização mais rápida, menos ciclos extras inesperados e um modelo mental mais claro: a interface só é atualizada quando o estado que você acompanha realmente muda.
Status experimental
O provedor se chama provideExperimentalZonelessChangeDetection porque a API está sendo estabilizada. Adote-o em aplicativos novos que priorizem signals e faça testes completos.
Verificação rápida
Teste sua compreensão do Angular sem zonas.
Recapitulação
Você aprendeu que provideExperimentalZonelessChangeDetection() elimina a necessidade do Zone.js, orientando as atualizações por meio de signals, eventos, do pipe async e de markForCheck() para criar aplicativos menores, mais rápidos e previsíveis.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 38
- Aulas
- 144
Perguntas Frequentes
A aula “Angular sem zonas” é grátis?
Sim — o texto completo de “Angular sem zonas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Angular sem zonas”?
Execute o Angular sem Zone.js. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Angular sem zonas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Como funciona a detecção de alterações
- Detecção de alterações com OnPush
- Angular sem zonas
- Otimização de listas e renderização