Angular 22.2: Error Boundary, router resources e mais

O Angular 22.2 foi lançado em 23 de setembro de 2026 como a segunda versão minor da série 22. A atualização traz APIs para isolar erros de renderização, carregar dados pelas rotas e melhorar a análise de templates.

As duas maiores novidades, @boundary e router resources, chegaram em Developer Preview. Elas já podem ser testadas em projetos reais, mas ainda podem mudar antes da estabilização.

Como atualizar para o Angular 22.2

Execute o ng update na raiz do projeto:

ng update @angular/core@22.2 @angular/cli@22.2

Depois da atualização, rode os testes e gere um build de produção. Também vale revisar bibliotecas que declaram uma faixa restrita de versões do Angular em peerDependencies.

A série 22 requer Node.js 22.22.3, 24.15.0 ou 26.0.0 em diante, além do TypeScript 6.0. Consulte a tabela oficial de compatibilidade antes de atualizar o ambiente de CI.

Error Boundary com @boundary e @error

O novo bloco @boundary impede que um erro de renderização derrube toda a árvore visual abaixo de um componente. Quando uma exceção ocorre durante a criação da view ou a detecção de mudanças, o Angular remove a região com problema e mostra o conteúdo de @error.

@boundary {
<app-sales-chart />
} @error {
<div role="alert">
	<p>Não foi possível exibir o gráfico.</p>
	<button type="button" (click)="$reset()">Tentar novamente</button>
</div>
}

O bloco de fallback recebe $error, com a exceção capturada, e $reset, que tenta renderizar o conteúdo outra vez. Também é possível declarar vários blocos @error com condições when para tratar tipos diferentes de falha.

O recurso é útil em gráficos, widgets de terceiros e partes da página que podem falhar de forma independente. O artigo Error Boundary no Angular 22.2 mostra os filtros condicionais, a integração com ErrorHandler e o tratamento de componentes criados dinamicamente.

Router resources carregam dados durante a navegação

O Angular Router agora pode criar Resource diretamente na configuração de uma rota. A API recebe parâmetros, query params, fragmento e dados da rota como signals.

Primeiro, habilite o recurso com withRouterResources(). O withComponentInputBinding() permite entregar o resultado ao componente por meio de um input:

import { provideRouter, withComponentInputBinding, withRouterResources } from '@angular/router'

export const appConfig = {
	providers: [provideRouter(routes, withComponentInputBinding(), withRouterResources())]
}

Depois, declare os recursos na propriedade resources da rota:

import { httpResource } from '@angular/common/http'
import { ChangeDetectionStrategy, Component, input } from '@angular/core'
import { Routes } from '@angular/router'

interface User {
	id: string
	name: string
}

@Component({
	selector: 'app-user-page',
	template: `<h1>{{ user().name }}</h1>`
})
export class UserPage {
	readonly user = input.required<User>()
}

export const routes: Routes = [
	{
		path: 'users/:id',
		component: UserPage,
		resources: (context) => ({
			user: httpResource<User>(() => `/api/users/${context.params()['id']}`)
		})
	}
]

Por padrão, o router espera o carregamento antes de concluir a navegação. Recursos de rotas pai e filha são carregados em paralelo, eliminando a sequência obrigatória que pode acontecer com resolvers aninhados.

Quando a tela pode aparecer antes dos dados, envolva o recurso com nonBlocking(). Nesse modo, o input recebe o próprio Resource e o componente precisa representar os estados de carregamento e erro.

import { nonBlocking } from '@angular/router'

resources: (context) => ({
	user: nonBlocking(httpResource<User>(() => `/api/users/${context.params()['id']}`))
})

O RedirectCommand também pode ser lançado em guards, resolvers e router resources. O router intercepta o objeto e executa o redirecionamento.

Propriedades privadas agora funcionam nos templates

Até o Angular 22.1, membros usados pelo template precisavam ser públicos ou protegidos. O compilador do Angular 22.2 também permite acessar propriedades privadas do próprio componente.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core'

@Component({
	selector: 'app-profile',
	template: `<h2>{{ name() }}</h2>`
})
export class Profile {
	private readonly name = signal('Ada Lovelace')
}

A mudança combina bem com isolatedDeclarations. Membros privados não fazem parte da API pública da classe, então o TypeScript consegue inferir seus tipos sem exigir anotações extras.

A permissão vale somente para membros do componente dono do template. O template continua sem acesso a propriedades privadas de serviços ou outros objetos.

Diagnóstico encontra eventos com nomes incorretos

O novo diagnóstico strictUnclaimedEventNames detecta eventos camelCase que não correspondem a um output do componente nem a um evento nativo do DOM. Ele ajuda a encontrar erros como (userSelcted) quando o output correto é (userSelected).

Ative a verificação em tsconfig.json:

{
	"angularCompilerOptions": {
		"strictTemplates": true,
		"strictUnclaimedEventNames": true
	}
}

A opção vem desativada, inclusive em projetos com strictTemplates. Eventos com hífen, como my-event, ficam fora da verificação porque costumam representar eventos personalizados disparados por elementos descendentes.

Em desenvolvimento, o Angular também mostra o aviso NG0318 quando um binding de estilo recebe um valor inválido. Por exemplo, [style.width]="true" agora gera uma mensagem no console em vez de falhar silenciosamente.

Angular CLI 22.2 melhora o pipeline de build

O CLI passou a iniciar o type checking e a geração dos bundles com esbuild em paralelo. O tempo total tende a se aproximar da etapa mais lenta, o que reduz a espera em builds e atualizações do servidor de desenvolvimento.

Há várias otimizações internas adicionais no linker, no cache, no processamento de Sass e no modo watch. O ganho exato depende do tamanho do projeto, da quantidade de estilos e do ambiente de execução.

O comando ng build --stats-json também ficou mais claro para aplicações com SSR. Em vez de misturar os dois destinos, ele gera arquivos separados:

browser-stats.json
server-stats.json

Essa separação facilita a análise do JavaScript enviado ao navegador e do bundle executado no servidor.

Vitest 5 e Angular DevTools

O builder de testes do Angular CLI 22.2 usa o Vitest 5. Projetos com configuração personalizada passam a usar vitest-base.config.mts, garantindo que o Node.js trate o arquivo como um módulo ES.

A opção splitting do builder foi descontinuada. O Vitest 5 corrigiu o problema de módulos compartilhados que tornava necessário desativar a divisão de código.

O Angular DevTools ganhou ações para observar as mudanças de um signal no console e criar breakpoints em signals no Chrome. O analisador experimental de Change Detection mostra quantas verificações cada componente executou e quanto tempo a última execução consumiu.

Outras mudanças do Angular 22.2

O restante da versão reúne ajustes menores que podem ser úteis em casos específicos:

• withAutoCleanupInjectors() se tornou estável e substitui o nome experimental usado desde o Angular 21.1.
• Signal Forms aceita hidden() sem condição para campos permanentemente ocultos.
• Queries de view e content podem ler o Injector associado ao elemento encontrado.
• O comando ng mcp recebeu a opção --root, que libera diretórios adicionais para o servidor MCP.
• Ferramentas WebMCP podem declarar anotações como readOnlyHint e consequentialHint.

Vale a pena atualizar para o Angular 22.2?

O Angular 22.2 melhora o framework sem exigir uma mudança ampla na arquitetura das aplicações. As otimizações do CLI, os diagnósticos e o Vitest 5 justificam a atualização mesmo para equipes que ainda não usarão as APIs em Developer Preview.

@boundary e router resources resolvem problemas comuns com uma sintaxe integrada ao Angular e aos signals. Como as duas APIs ainda podem mudar, adote-as primeiro em áreas isoladas e mantenha os testes cobrindo navegação, carregamento e recuperação de erros.

Referências

• Changelog do Angular 22.2
• Changelog do Angular CLI 22.2
• Documentação de Error Boundaries
• Documentação de router resources
• What’s new in Angular 22.2?, da Ninja Squad