Anunciado o Angular v22

• O Angular v22 expande os fluxos de agentes de IA com ferramentas de controle do servidor de desenvolvimento no Angular MCP, Angular Agent Skills, WebMCP experimental e fluxos de geração de Angular no Google AI Studio e Gemini Canvas
• Com foco em melhorar a estabilidade e a experiência de desenvolvimento, ele promove Signal Forms, Angular Aria e resource/httpResource dos estágios experimental/preview para prontas para produção
• Signal Forms é uma API declarativa de formulários que combina Reactive Forms, formulários fortemente tipados, formulários baseados em template e a reatividade de signals; a documentação foi reforçada, o feedback da comunidade foi incorporado e o suporte a Angular Material e Angular Aria foi concluído
• As melhorias de API e templates incluem integração do Router com a Navigation API, controle de limpeza de recursos de rota, suporte a @Service e injectAsync, comentários em elementos HTML, spread/rest, verificação de @switch e funções arrow em templates
• O Angular v22 reforça sua base para o futuro com OnPush como padrão em novos apps, renomeação de ChangeDetectionStrategy.Eager, preview para desenvolvedores de @boundary no 3º trimestre de 2026 e futura descontinuação do suporte à linha Webpack, com foco em TSGo

---

Recursos promovidos para prontos para produção

• Signal Forms é uma API de formulários reativa, componível e declarativa que combina as vantagens de Reactive Forms, formulários fortemente tipados, elementos preferidos dos formulários baseados em template e a reatividade de signals
• Desde o lançamento da v21, o guia de formulários do angular.dev foi atualizado, o feedback e os problemas relatados pela comunidade foram incorporados, e passou a haver suporte para integração com Angular Material e Angular Aria
• Angular Aria é um conjunto de primitivas de acessibilidade projetado para que desenvolvedores cuidem do estilo e da lógica de negócio, enquanto diretivas e padrões de UI tratam da acessibilidade; na v22, ele passa a estar pronto para uso em produção
• Os 12 padrões de UI do Angular Aria cobrem padrões comuns de acessibilidade, com API estabilizada, suporte completo a Signal Forms e test harnesses
• As APIs reativas assíncronas usam resource para tratar recursos assíncronos com a usabilidade do modelo de signals e httpResource para lidar com busca de dados HTTP em um modelo mais declarativo
• resource e httpResource podem ser usados em apps de produção na v22, e o uso está descrito no guia oficial

Desenvolvimento com IA e fluxos de agentes

• O Angular v22 expande os fluxos para aplicações AI-native em três áreas: ferramentas de agentes para escrita de código, ferramentas de agentes no navegador e plataformas de desenvolvimento com IA
• Em Angular MCP, devserver.wait_for_build ajuda o agente a compilar a aplicação e revisar a saída para decidir o próximo passo, permitindo criar um loop de autocorreção com base em erros de código nos logs de build
• devserver.start e devserver.stop iniciam e encerram o servidor de desenvolvimento, e essas ferramentas passam a stable na v22 junto com ferramentas de teste e end-to-end
• O Angular MCP continua ampliando sua lista de ferramentas para ajudar no desenvolvimento moderno com Angular, incluindo ai_tutor, modernize e onpush_zoneless_migration
• Em Angular Agent Skills, angular-developer fornece ao modelo orientações de desenvolvimento Angular moderno, incluindo recursos recentes como Angular Aria e Signal Forms; o arquivo tem menos de 140 linhas e usa divulgação progressiva, carregando exemplos de código e arquivos de referência quando necessário
• angular-new-app orienta pessoas que estão explorando Angular pela primeira vez em ambientes de agentes a configurar um ambiente local de programação com Angular; essas skills podem ser usadas em ferramentas de desenvolvimento com IA como Antigravity ou em ambientes de fluxo de agentes
• As Contributor Skills ajudam a entender o modelo mental necessário para desenvolver recursos dentro do codebase do Angular, sendo valiosas tanto para quem prepara o primeiro pull request quanto para integrantes experientes da equipe
• O WebMCP, ainda experimental, permite criar e expor ferramentas estruturadas para uso de agentes dentro do navegador, reduzindo a necessidade de interação direta com o DOM, com suporte a definições de ferramentas para app inteiro, routes e services, além de geração automática dinâmica de ferramentas com base em Signal Forms
• A documentação de integração com WebMCP está em angular.dev/ai/webmcp
• Google AI Studio e Gemini Canvas ajudam builders sem formação tradicional em programação a iniciar projetos baseados em Angular, e o sandbox de código embutido no app web do Gemini permite criar aplicações completas no navegador
• No fluxo do Gemini, ao informar “Angular” no prompt, um app Angular é gerado; depois disso, é possível editar manualmente no navegador, continuar conversando com a IA para refiná-lo ou solicitar integração com Firebase
• No Google AI Studio, há um fluxo semelhante no qual é possível selecionar Angular no painel de configuração e iniciar o prompt; após a geração, é possível adicionar recursos via chat e seguir até o deploy

Router e APIs de injeção de dependência

• A integração com a Navigation API alinha o Router à Navigation API nativa do navegador, oferecendo controle de navegação do app com menos boilerplate
• O Router pode interceptar automaticamente todas as navigation requests, incluindo RouterLink e tags anchor padrão
• Aproveitando o comportamento nativo de scroll, ele leva a pessoa usuária ao ponto esperado em navegações de voltar/avançar, sem lógica personalizada de gerenciamento de scroll e sem impacto no bundle size
• Ao se conectar diretamente ao ciclo de vida de navegação nativo do navegador, fica mais fácil lidar com indicadores globais de carregamento e anúncios de acessibilidade precisos durante transições de página
• O controle de limpeza de rotas trata o gerenciamento de memória de forma mais explícita com withExperimentalAutoCleanupInjectors e destroyDetachedRouteHandle
• withExperimentalAutoCleanupInjectors destrói automaticamente dependency injectors associados a rotas que não estão mais ativas, limpando providers e recursos ociosos no nível de rota
• destroyDetachedRouteHandle é a API pública oficial para destruir corretamente componentes dentro de detached route handles ao usar uma RouteReuseStrategy personalizada
• O decorator @Service substitui o padrão @Injectable({ providedIn: 'root' }) na maioria dos casos de uso, enquanto @Injectable continua disponível quando há necessidade de configuração mais profunda ou constructor injection
• injectAsync oferece suporte à injeção assíncrona de dependências em services, permitindo code splitting e carregamento sob demanda; o service precisa estar em estado auto-provided, e @Service cuida disso
• No exemplo de injectAsync, o service ReportExporter não é carregado até seu primeiro uso, e também é possível definir prefetch como prefetch: onIdle
• O uso está descrito na documentação oficial do injectAsync
• Outras melhorias incluem compatibilidade total com TypeScript 6 e ganhos de desempenho no pipeline de templates e na eficiência de runtime

Experiência de escrita de templates e detecção de mudanças

• Agora é possível usar comentários no nível de propriedade e binding dentro de elementos HTML, melhorando a legibilidade e a clareza dos templates, com suporte também ao toggle de comentários no VS Code
• O Angular elimina automaticamente duplicações de host directives quando há múltiplas correspondências no mesmo elemento
• Se uma directive corresponder tanto no template quanto como host directive, a correspondência do template tem prioridade, e os mapas de input/output da host directive são mesclados
• Se um input ou output for exposto com vários nomes, o Angular gera erro para evitar conflitos de nomenclatura
• Templates podem usar sintaxe spread/rest, aplicável a object literals, array literals e chamadas de função
• @switch pode fazer vários @case compartilharem a mesma saída, reduzindo duplicação de código
• Em blocos @switch com union types, usar @default never; permite receber erro em tempo de compilação quando houver valores não tratados
• Funções inline em templates podem ser usadas na forma de arrow functions, adequadas para funções curtas e simples; a condição é que funções complexas ou de longa execução não sejam colocadas no template
• Em novas aplicações, OnPush passa a ser a estratégia padrão de detecção de mudanças, alinhada ao objetivo de zoneless por padrão e performance por padrão
• O antigo padrão ChangeDetectionStrategy.Default foi renomeado para ChangeDetectionStrategy.Eager, deixando mais claro seu comportamento no ciclo de detecção de mudanças

Error boundaries, descontinuações e direção futura

• @boundary é uma nova API para implementar error boundaries em templates Angular, capturando erros gerados dentro do bloco de código envolvido e permitindo definir conteúdo de fallback
• O objetivo é reduzir problemas em fluxos críticos, como checkout de e-commerce, nos quais a falha de um único componente pode derrubar a página inteira
• @boundary deve ser disponibilizado como developer preview no 3º trimestre de 2026
• O suporte a Webpack, builders de @angular-devkit/build-angular, @ngtools/webpack e afins passam ao estado de deprecated na v22
• O Angular está focando no suporte a TSGo no application builder, e mais detalhes sobre depreciação podem ser vistos no Angular CHANGELOG

[GN⁺]

Comentários do Hacker News

• Estou criando um app bem complexo com Angular v21, e a experiência tem sido ótima porque a carga cognitiva para criar e lidar com componentes, estado e fluxo de dados é baixa
  Ficou muito mais fácil graças aos signals e ao signal store, e escrevi tudo à mão, sem ferramentas de codificação com IA

• Admito que hoje em dia Angular está num nível realmente agradável de usar
  É uma pena que o ecossistema seja meio irregular, mas felizmente a base já oferece muita coisa

  • Tive a mesma experiência
    Eu gostaria que o Angular abandonasse seu compilador peculiar, fortemente acoplado ao tsc, e adotasse uma abordagem mais plugável, que funcionasse com qualquer compilador TypeScript
    O tempo de cold build do app e dos testes unitários ainda não é grande coisa, mas com agentes de código isso acaba pesando um pouco menos
  • Fiquei curioso sobre o que exatamente é irregular no ecossistema
    Nunca tive problema para encontrar pacotes, e a maioria deles também está seguindo bem o fluxo com signals
  • Fico me perguntando se os projetos ainda escolhem coisas como RxJS, deixando o código cada vez mais empilhado e a depuração dolorosa
    Ou se finalmente o ecossistema Angular voltou ao bom senso

• Recentemente atualizei um projeto Angular bem complexo da v14 para a v21
  Por alguns anos pareceu que o desenvolvimento do Angular tinha desacelerado, mas quando se vê de uma vez só tudo o que mudou entre essas versões, parece quase um framework completamente novo

• Angular Aria parece muito bom mesmo
  A documentação está bem completa até para cenários complexos, como autocomplete, então quero testar logo para ver se pode substituir o autocomplete para leitor de tela que eu costumava implementar manualmente

  • Posso ter entendido algo errado, mas ao testar o teclado em https://angular.dev/guide/aria/overview#showcase, eles configuraram a navegação com teclas de seta em vez do muito mais comum tab/shift+tab
    E até as próprias abas da documentação logo acima desse exemplo usam tab/shift+tab para mover o foco

• Estou realmente empolgado com esse recurso
  Queria usar signal-forms e resources desde que ainda eram experimentais, e depois que passei a usar signals não consegui mais voltar
  Ter que usar RxJS por causa de formulários era um sofrimento enorme

  • Será que alguém poderia explicar um pouco melhor o que são signals?
    Fico pensando se é parecido com o paradigma de signals em engines de jogo como o Godot, em que componentes emitem signals e outros componentes se inscrevem neles independentemente da profundidade, ou se é algo totalmente diferente

• Antes do React eu gostava bastante de Angular, e foi uma época bem boa, mas sinceramente hoje em dia eu quase esqueço que Angular existe
  Não é nem para elogiar o React; na verdade atualmente gosto mais da abordagem com htmx
  Só que a sensação é que agora a competição mudou para qual framework ou linguagem os agentes lidam melhor, e até que ponto análise estática ou ferramentas no nível do compilador conseguem detectar erros

• Gosto do Angular porque ele tem uma vibe meio Django
  Vem com tudo de que você precisa e é fácil de usar

  • Dá até a impressão de que seria melhor simplesmente usar Django
    Ou então usar um backend mais rápido com templates e renderização no lado do servidor, adicionar htmx, e obter uma experiência parecida com app de página única sem toda a loucura do ecossistema JS quebrado

• Graças ao Angular, minha carreira em programação foi prazerosa e nunca pareceu trabalho
  Não tem nada melhor do que trabalhar com uma linguagem de que você gosta, aprender mais e ainda ser pago por isso

• Faz tempo que não uso Angular
  Como alguém que usa outros frameworks JavaScript como Vue, React e Svelte, fico curioso sobre o que estou deixando passar
  Queria entender por que alguém escolheria Angular em vez de outros grandes frameworks

  • Em geral, eu diria que Angular funciona melhor quando você quer transformar aplicações antigas em websites
    Principalmente se você não gosta muito de JavaScript nem de desenvolvimento web, e considera o backend a parte principal

• A estrutura é algo como import {signal} from "@angular/core" e import {form} from "@angular/forms/signals": signal vem de core, enquanto form vem de forms/signals
  Imagino que exista alguma razão terminológica que eu não entendi
  Fora isso, estou animado para voltar a usar Angular depois de 10 anos, e parece bem interessante

  • Signals são a estrutura de dados fundamental do Angular, por isso ficam em core
    Formulários baseados em signals fazem parte do módulo Forms, então, se você não usa formulários, não precisa carregar esse overhead
  • Existem várias formas de lidar com formulários no Angular
    Isso provavelmente é um import para os novos formulários baseados em signals