Angular 22, lançado em 3 de junho de 2026, é a versão estável mais recente do estrutura no momento em que este livro foi escrito. Comparado ao Angular 21 (novembro de 2025, que tornou zoneless o padrão e introduziu Signal Forms como uma API experimental), esta versão consolida em produção estável tudo o que ainda estava na visualização do desenvolvedor: Signal Forms, API de recursos e Angular Aria tornam-se oficialmente utilizáveis em produção, os padrões de alguns As APIs mudam para padrões mais modernos e chega uma primeira camada de ferramentas de IA integradas à CLI.
Como sempre acontece com uma versão recente, verifique a versão exata instalada e as notas de versão
oficial antes de planejar uma atualização em produção: ng version e npm view
@angular/coreversion retorna o estado real do seu projeto e registro npm,
mais confiável do que qualquer resumo estático.
Visão geral rápida
- Formulários de Sinal Estáveis: O sistema de formulários baseado em Sinal, experimental na v21, agora está pronto para produção.
- API de recursos estável:
resource(),rxResource()ehttpResource()passam de experimental para estável. - Angular Aria stable: Pacote
@angular/ariapara movimentos de padrão de acessibilidade da visualização do desenvolvedor para disponibilidade geral. - OnPush como padrão: novos componentes usam
OnPushem vez deEagerpara detecção de alterações. - Fetch API como padrão para HttpClient: substitui
- Ferramentas de IA na CLI: Angular Skills e suporte WebMCP experimental para agentes de codificação.
- TypeScript 6 necessário: Requisito mínimo aumentado, Nó 20 não mais suportado (Nó 22 mínimo).
Recurso detalhado
Formas de sinal: de experimental a estável
Signal Forms combina a digitação forte de formulários reativos tradicionais com capacidade de resposta granular
do Signal, eliminando grande parte do padrão de FormGroup/FormControl.
Nesta versão os validadores minDate()/maxDate() chegam, debounce nativo
em eventos de desfoque e um método getError() para recuperar erros direcionados sem
percorrer toda a árvore de formulários.
// Signal Forms — validazione con debounce sul blur, stabile da v22
const form = signalForm({
email: field('', { validators: [required(), email()] }),
});
debounce(form.email, 'blur', 300);
API de recursos: busca reativa de dados
// httpResource() — fetching dichiarativo, nessun switchMap manuale
userResource = httpResource(() => `/api/users/${this.userId()}`);
// userResource.value(), userResource.isLoading(), userResource.error() sono Signal reattivi
Novidade nesta versão: um método chain() para compor recursos mutuamente dependentes
por outro lado, sem aninhar manualmente effect() e suporte de cache lateral SSR via
uma opção id, útil para evitar busca dupla entre o servidor de renderização e o cliente de hidratação.
OnPush por padrão e API de busca por padrão
// Da Angular 22, un componente senza changeDetection esplicito è OnPush per default
@Component({ selector: 'app-widget', template: `...` })
export class WidgetComponent {} // equivalente a changeDetection: ChangeDetectionStrategy.OnPush
HttpClient usa Fetch API em vez de XMLHttpRequest sem precisar
withFetch() explícito (agora obsoleto para remoção); tenha cuidado se o seu
o código depende de reportProgress para upload, porque o relatório de progresso em
upload não é compatível com a implementação Fetch e deve ser tratado com as novas
reportUploadProgress/reportDownloadProgress.
@Service Decorator e injectAsync()
// @Service — scorciatoia per @Injectable({ providedIn: 'root' }), richiede inject() non constructor DI
@Service()
export class NotificationService {
private readonly http = inject(HttpClient);
}
// injectAsync() — lazy loading di un servizio via dynamic import, con prefetch opzionale
const analytics = await injectAsync(() => import('./analytics.service'), { prefetch: 'onIdle' });
Angular Aria: Acessibilidade como infraestrutura
@angular/aria, agora em disponibilidade geral, fornece diretivas que tratam
atributos ARIA automaticamente, navegação por teclado e gerenciamento de foco para padrões compostos
(combobox, tab, tree) — o desenvolvedor se concentra no design visual e na lógica de negócios, não
sobre a reimplementação manual do Guia de práticas de autoria ARIA para cada componente.
Alterações e descontinuações importantes
- TypeScript 6 necessário: 5.9 e anteriores não são mais suportados — atualize o TypeScript antes de executar
ng update. - Nó 20 removido: O mínimo suportado é o Nó 22 (Nó 26 suportado).
touchedem formas de sinal alteradas: do modelo para o par de entrada/saída (touchedentrada,touch()saída) — impacto direto no código que leu/escreveutocadocomo modelo.markAsTouched()agora marca descendentes por padrão: use{ skipDescendants: true }para preservar o comportamento anterior se seu código o assumiu.- Roteador:
canMatchrequer um terceiro parâmetro obrigatório (currentSnapshot) — as proteções existentes devem ser atualizadas na assinatura. paramsInheritanceStrategyagora'always'por padrão (era'emptyOnly'): Verifique se o seu roteamento dependia de o antigo comportamento implícito.- O encadeamento opcional em modelos altera a semântica:
project?.authoragora retornaundefinedem vez denullem valores nulos, alinhando com Texto datilografado. withIncrementalHydration()obsoleto porque agora é o SSR padrão; usewithNoIncrementalHydration()se você precisar explicitamente do comportamento antigo.
Ferramentas e construção
# Migrazione automatica dei test da Karma a Vitest
ng generate migrate-karma-to-vitest
# Build con ottimizzazione dei chunk abilitata di default (disattivabile via env var)
NG_BUILD_OPTIMIZE_CHUNKS=false ng build --configuration production
Rollup continua sendo o otimizador padrão, mas Rolldown está disponível como uma opção em
NG_BUILD_CHUNKS_ROLLDOWN para aqueles que desejam experimentar tempos de construção ainda mais reduzidos.
A variável de ambiente PORT agora tem precedência sobre o sinalizador --port para o dev
servidor, útil para configurações de CI/CD em contêineres.
Desempenho e pacote
OnPush como padrão reduz o número de ciclos desnecessários de detecção de alterações para
comece a partir de novos projetos de andaimes, sem necessidade de configuração manual. A otimização de
pedaço habilitado por padrão na construção de produção reduz ainda mais o pacote inicial comparado
para versões anteriores. Sempre meça antes/depois com instrumentos padrão:
ng build --configuration production --stats-json
npx webpack-bundle-analyzer dist/*/stats.json
npx lighthouse http://localhost:4200 --view
Gestão de Estado e Reatividade
Com Signal Forms e Resource API estáveis, o padrão recomendado para novo código agora é
Sinal primeiro: estado local com signal()/computed(), busca de dados com
resource()/httpResource(), formulário com formulários de sinal. RxJS permanece totalmente
suportado e necessário para fluxos complexos (WebSockets, vários eventos combinados), mas não é mais o
padrão implícito para cada novo componente. Novidade experimental nesta versão: debounced(),
uma função que cria uma versão debounce de um Signal retornando um objeto Resource.
// debounced() — sperimentale, debounce di un Signal senza RxJS
const query = signal('');
const debouncedQuery = debounced(query, { delay: 300 });
Renderização e borda do lado do servidor
A hidratação incremental agora é o comportamento padrão do SSR (não é mais opcional via
withIncrementalHydration(), que na verdade está obsoleto justamente por ser supérfluo).
provideServerRendering() agora aceita um objeto de opções, incluindo
maxResponseBodySize para limitar o tamanho da resposta renderizada do lado do servidor —
útil em plataformas de ponta com limites rigorosos de carga útil por função única.
// provideServerRendering con opzioni — utile su piattaforme edge con limiti di response size
provideServerRendering({ maxResponseBodySize: 5_000_000 });
Compatibilidade e Dependências
| Angular | TypeScript | Node | Nota |
|---|---|---|---|
| 21 | 5.6+ | 20 / 22 | Padrão sem zona, formas de sinal experimental |
| 22 | 6,0 mínimo | 22 / 26 (20 removidos) | Formulários de sinal/API de recursos/Ária estável |
Para Angular Material, NgRx e outras bibliotecas de ecossistema, sempre verifique a compatibilidade
declarado em peerDependencies do pacote específico antes da atualização:
npm visualizar @angular/material peerDependencies. Bibliotecas que dependem fortemente de
FormControl/FormGroup permanecem compatíveis - Signal Forms
coexiste com APIs reativas/orientadas por modelo herdadas, não as substitui à força.
Migração e Plano Operacional
# Verifica prima di aggiornare
ng version
npm outdated
# Aggiornamento a v22 con dry-run preventivo
ng update @angular/core@22 @angular/cli@22 --dry-run
ng update @angular/core@22 @angular/cli@22
Lista de verificação mínima de pré-atualização: TypeScript já em 6.x, Node já em 22+, branch dedicado, construção e teste verde como linha de base. Após a atualização, execute todo o conjunto de testes e uma compilação de produção completa antes de prosseguir com qualquer adoção opcional (Signal Forms, Aria) em componentes existentes - o As atualizações de versão e a adoção de novas APIs são duas atividades distintas e não devem ser combinadas em uma só. mesmo commit. Para reversão, a tag Git de pré-atualização continua sendo o mecanismo mais rápido e confiável.
Testes e controle de qualidade
// TestBed.getLastFixture() — nuova utility per recuperare l'ultima fixture creata
it('renderizza correttamente', () => {
TestBed.createComponent(WidgetComponent);
const fixture = TestBed.getLastFixture();
expect(fixture.nativeElement.textContent).toBeTruthy();
});
Vitest agora tem suporte nativo para Zone.js via zone.js/plugins/vitest-patch, e o
migração automática migrate-karma-to-vitest cobre a maioria dos projetos Karma
existente; para quem já migrou para Jasmine/Vitest, a flag --fake-async na migração
refactor-jasmine-vitest cobre padrões de teste assíncronos baseados em temporizador.
Segurança e Melhores Práticas
Nenhuma alteração padrão relacionada a cookies ou CSP nesta versão específica, mas a alteração para Fetch
Vale a pena conferir a API para HttpClient: se seu aplicativo depende de comportamentos
específico para XMLHttpRequest (por exemplo, cabeçalhos personalizados em solicitações de origem cruzada), teste explicitamente i
fluxos de autenticação após a atualização. As práticas recomendadas restantes (HttpOnly/SameSite em cookies
sessão, CSP restritivo) não mudam e devem ser mantidos independente da versão Angular.
Casos de uso
Caso 1: Painel empresarial com formulários complexos
Um painel corporativo com mais de 40 formulários distribuídos em vários módulos adotou o Signal Forms sui novos formulários de recursos após a atualização para v22, mantendo os formulários legados nos formulários reativos tradicionais graças à plena coexistência das duas APIs. Resultado: padrão reduzido em cerca de 30% em novos formulário, validação com debounce nativo que eliminou o código de debounce manuscrito personalizado em RxJS anteriormente.
Caso 2: aplicativo com requisitos rigorosos de acessibilidade
Um aplicativo público sujeito aos requisitos WCAG AA substituiu a implementação personalizada de
combobox e tab (com gerenciamento ARIA escrito manualmente) com @angular/aria após o
estabilização em v22. Resultado: auditoria automática de acessibilidade aprovada sem intervenção manual
adição em padrões migrados, redução de código específico de gerenciamento de foco/teclado para
componente de aproximadamente 200 linhas no total.
FAQ
Você precisa migrar imediatamente todos os formulários para Signal Forms?
Não, Signal Forms coexiste com formulários reativos/orientados por modelo herdados; a migração pode ser gradual e oportunista.
O OnPush como padrão quebra os componentes existentes?
Não, o padrão só se aplica a novos componentes sem changeDetection explícito; os componentes existentes mantêm a estratégia já declarada.
Devo atualizar o Node antes de atualizar o Angular?
Sim, o Node 20 não é mais suportado na v22 - verifique e atualize o Node para 22+ antes de executar ng update.
Por padrão, a API Fetch interrompe as chamadas HTTP existentes?
Na maioria dos casos não, mas verifique o relatório de progresso do upload, que requer as novas opções dedicadas em vez do antigo reportProgress.
Ária Angular substitui Material Angular?
Não, eles são complementares: Aria fornece padrões de acessibilidade comportamental, Material fornece componentes visuais já estilizados.
O que acontece se eu não atualizar o TypeScript para 6?
ng update para v22 falhará ou reportará incompatibilidade: TypeScript 6 é um requisito obrigatório, não opcional.
O Vitest necessariamente substitui o Karma?
Não é necessário imediatamente, mas o Karma está sendo descontinuado no ecossistema Angular; a migração automática torna a mudança para o Vitest de baixo risco.
As ferramentas AI/MCP são necessárias para usar o Angular 22?
Não, é opcional e projetado para quem usa agentes de codificação assistidos por IA; não afeta a operação padrão do aplicativo.
Como verificar
- Verifique a versão e dependências:
ng versãoenpm desatualizado. - Compilação de produção completa:
ng build --configuration production. - Execute todo o conjunto de testes:
ng test(ouvitest runse já tiver migrado). - Teste de fumaça manual em fluxos críticos (autenticação, formulários principais) após a atualização.
- Teste E2E completo:
npx cypress runou equivalente. - Verifique o tamanho e o desempenho do pacote: analisador de pacote mais farol
npx http://localhost:4200, em comparação com a linha de base pré-atualização.
Conclusão
Angular 22 não introduz uma mudança de paradigma, mas sim uma consolidação: nascem APIs baseadas em sinais nas versões anteriores (Signal Forms, Resource API) finalmente se tornam estáveis e prontos para produção, os padrões avançam para padrões de maior desempenho (OnPush, Fetch API) e chega o primeiro camada de ferramentas projetada para desenvolvimento assistido por IA. Para a maioria dos projetos, atualizar da v21 é de baixo risco se o TypeScript e o Node já estiverem atualizados; a adoção de novos No entanto, a API permanece opcional e pode prosseguir gradualmente após a atualização da versão.
Você deseja uma lista de verificação de migração detalhada para o seu projeto ou uma avaliação do esforço de atualização? Solicite uma auditoria técnica: em poucas horas de análise é possível estimar riscos, quebrar alterações relevantes para sua base de código e prioridades de adoção para novas APIs.