- Angular v21 é uma grande atualização para a era do desenvolvimento web centrado em IA, com recursos principais como Signal Forms, Angular Aria, servidor MCP, Vitest e detecção de mudanças Zoneless
- Signal Forms oferece gerenciamento reativo de formulários baseado em Signals, com segurança de tipos e validação baseada em schema
- Angular Aria é uma biblioteca headless de componentes UI com acessibilidade em primeiro lugar, com 8 padrões e 13 componentes que podem ser personalizados ao estilo do desenvolvedor
- Vitest foi adotado e estabilizado como executor de testes padrão, enquanto zone.js foi removido da inclusão padrão, consolidando a estratégia Zoneless
- O ponto central desta versão é o fortalecimento da experiência do desenvolvedor e da integração com IA por meio do novo site de documentação e das ferramentas de tutor de IA e servidor MCP
Visão geral dos principais recursos
- O Angular v21 reforça amplamente os recursos para criar ambientes de desenvolvimento com suporte de IA e aplicações web escaláveis
- A nova versão é centrada em Signal Forms, Angular Aria, servidor MCP, Vitest e detecção de mudanças Zoneless
- Novas aplicações não incluem mais
zone.js por padrão, adotando a estratégia Zoneless em seu lugar
- O Angular CLI define o Vitest como executor de testes padrão, enquanto Karma e Jasmine continuam com suporte
- O servidor MCP, que permite colaboração com agentes de IA, foi estabilizado, permitindo que LLMs usem os recursos mais recentes do Angular
Signal Forms (recurso experimental)
- Signal Forms é uma biblioteca de gerenciamento reativo de estado de formulários baseada em Signals
- O modelo do formulário é definido como signal e sincronizado automaticamente com os campos
- Inclui segurança de tipos e lógica de validação baseada em schema
- Faz binding com templates usando
form() e a diretiva [field]
- Permite binding com componentes customizados sem
ControlValueAccessor
- Inclui padrões básicos de validação, como validação de e-mail e correspondência por expressão regular, além de permitir validadores customizados
- Atualmente está em fase experimental e deve evoluir com base no feedback
Angular Aria (preview para desenvolvedores)
- Angular Aria é uma biblioteca headless de componentes UI com acessibilidade como prioridade máxima
- Fornece 8 padrões (Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar, Tree) e 13 componentes
- Todos os componentes são fornecidos sem estilo, permitindo customização livre
- Comando de instalação:
npm i @angular/aria
- A equipe do Angular apresenta três caminhos para desenvolvimento de componentes
- Angular Aria: componentes headless com foco em acessibilidade
- CDK: fornece primitivos de comportamento, como Drag & Drop
- Angular Material: componentes completos no estilo Material Design
Servidor MCP e integração com IA
- O servidor MCP é um servidor de ferramentas com suporte de IA embutido no Angular CLI e foi estabilizado no v21
- Principais recursos
- get_best_practices: fornece boas práticas
- search_documentation: pesquisa a documentação oficial
- find_examples: fornece exemplos atualizados de Angular
- onpush_zoneless_migration: gera um plano de transição para Zoneless
- ai_tutor: assistente de aprendizado de Angular baseado em IA
- Com o servidor MCP, é possível superar o problema de knowledge cutoff dos LLMs, aproveitando recursos recentes como Signal Forms e Angular Aria
Vitest como executor de testes padrão
- Vitest foi estabilizado como executor de testes padrão do Angular
- Pode ser executado com o comando
ng test
- Karma foi descontinuado após 2023, e Jest e Web Test Runner devem ser removidos no v22
- Projetos existentes ainda podem continuar usando Karma/Jasmine
- O comando
ng g @schematics/angular:refactor-jasmine-vitest oferece migração automática
Detecção de mudanças Zoneless
- zone.js realizava a detecção de mudanças por meio de patching nas APIs do navegador, mas tinha limitações de desempenho
- A detecção de mudanças Zoneless baseada em Signals passou a ser o padrão no v21
- Em 2024, mais da metade dos novos apps internos do Google já usavam Zoneless
- Segundo o HTTP Archive, mais de 1.400 apps públicos adotaram Zoneless
- Vantagens do Zoneless
- Melhoria em Core Web Vitals, redução do tamanho do bundle, simplificação da depuração e maior compatibilidade com processamento assíncrono
- Apps existentes podem usar o guia de migração ou a ferramenta
onpush_zoneless_migration do servidor MCP
Documentação e melhorias na experiência do desenvolvedor
- Reformulação completa do site angular.dev
- Nova landing page e estrutura de documentação focada em conceitos atuais
- Criação do hub de recursos para desenvolvimento com IA (angular.dev/ai)
- Atualizações nos guias de Signals tutorial, roteamento, DI, temas do Material e Tailwind CSS
- A ferramenta
search_documentation do servidor MCP permite pesquisar a documentação mais recente
Melhorias adicionais
- Atualização da biblioteca CLDR para a v47 (melhorias em formatação de moeda e data)
- Suporte a expressões regulares em templates, formatadores embutidos para Signals e customização de opções do IntersectionObserver
- Genericização de SimpleChanges, melhorias no pipe KeyValue e adição de classes utilitárias do Material
- O CDK Overlay melhora a acessibilidade ao usar o popover nativo do navegador
- O Angular DevTools ganhou visualização de rotas e gráfico de Signals
Contribuições da comunidade
- Desde o v20, 215 pessoas contribuíram para a base de código do Angular
- Principais contribuições
- Jaime Burgos: melhorias em migração e diagnósticos
- Angelo Parziale: adição da migração de conversão de NgClass/NgStyle
- Hryhorii Avcharov: adição da aba Transfer State no DevTools
- Luke Beach, Ruslan Lekhman, Cédric Exbrayat, Younes Jaaidi e outros: melhorias em recursos relacionados a Vitest e CDK
Outros
- O resultado da votação do mascote do Angular será divulgado no evento de lançamento no YouTube em 20 de novembro de 2025
- A equipe do Angular pretende continuar evoluindo um ambiente de desenvolvimento de apps web com escalabilidade e confiança por meio de Signal Forms e Angular Aria
- É possível atualizar para a versão mais recente com o comando
ng update
2 comentários
Será que, no caso de linguagens ou frameworks em que o desempenho de LLMs é ruim, eles fornecem um servidor MCP desse jeito para melhorar a qualidade das respostas?
O suporte oficial a servidor MCP parece interessante; queria saber se o React também tem algo parecido.