Angular 21: Zoneless, Signal Forms e Migrações

O lançamento do Angular 21 representa um marco definitivo na evolução do framework, consolidando a transição para uma arquitetura moderna baseada em Signals e livre de dependências legadas. Esta versão não foca apenas em grandes recursos, mas também entrega uma vasta gama de melhorias na experiência de desenvolvimento (DX), ferramentas de IA e atualizações na infraestrutura interna do framework.

Com a remoção do Zone.js por padrão, a introdução de primitivos de formulários baseados em Signals e uma nova biblioteca focada em acessibilidade, o Angular 21 oferece um ecossistema robusto. Além disso, a integração com ferramentas modernas de teste e suporte expandido para agentes de Inteligência Artificial preparam o terreno para a próxima geração de aplicações web.

Se preferir, assista o vídeo diretamente no YouTube:

Zoneless: O Novo Padrão de Performance

A mudança mais estrutural do Angular 21 é a remoção do Zone.js como dependência padrão para novas aplicações. Após validação em grandes projetos internos do Google e na comunidade, o modo “Zoneless” atingiu a estabilidade.

Isso elimina a necessidade de “monkey-patching” (sobrescrita) de APIs do navegador, resultando em:

Bundles menores: Menos código JavaScript enviado ao cliente.
Melhor depuração: Stack traces mais limpos e compreensíveis.
Performance: Renderização acionada apenas quando Signals são atualizados, sem verificações desnecessárias.
Compatibilidade: Uso nativo de async/await sem adaptações.

Para projetos existentes, a ferramenta de migração onpush_zoneless_migration (disponível via MCP) auxilia na transição para estratégias de detecção de mudança OnPush e Zoneless.

Signal Forms: A Revolução nos Formulários (Experimental)

Os Signal Forms chegam para resolver a complexidade histórica dos formulários reativos. Esta nova biblioteca, ainda em estágio experimental, utiliza a reatividade fina dos Signals para gerenciar estado e validação, oferecendo inferência de tipos automática.

Principais características:

Modelo Reativo: O estado do formulário é um Signal, sincronizado automaticamente.
Sem Vazamento de Memória: Fim da necessidade de takeUntil ou gerenciamento manual de subscrições.
Validação Centralizada: Esquemas de validação definidos junto ao modelo.

Veja o exemplo de implementação abaixo:

import { Component, signal } from '@angular/core'
import { form, Field, required, minLength } from '@angular/forms/signals'
import { JsonPipe } from '@angular/common'

interface UserForm {
	name: string
	age: number | null
}

@Component({
	selector: 'app-user-form',
	imports: [JsonPipe, Field],
	template: `
		<form>
			<label>
				Nome:
				<input [field]="userForm.name" type="text" />
			</label>

			@for (error of userForm.name.errors(); track error) {
				<p class="error">{{ error.message }}</p>
			}

			<label>
				Idade:
				<input [field]="userForm.age" type="number" />
			</label>

			@for (error of userForm.age.errors(); track error) {
				<p class="error">{{ error.message }}</p>
			}

			<button [disabled]="userForm.invalid()">Salvar</button>
		</form>

		<pre>{{ userForm.value() | json }}</pre>
	`
})
export class UserFormComponent {
	protected user = signal<UserForm>({ name: '', age: null })

	protected userForm = form(this.user, (path) => {
		required(path.name, { message: 'O nome é obrigatório.' })
		minLength(path.name, 3, { message: 'O nome precisa de pelo menos 3 caracteres.' })
		required(path.age, { message: 'A idade é obrigatória.' })
	})
}

Angular Aria: UI Acessível e Headless

O Angular Aria é a nova biblioteca (em Developer Preview) focada em acessibilidade e customização total. Diferente do Angular Material, ela oferece componentes “headless” (sem estilo visual), permitindo que você aplique seu próprio design system (como Tailwind) mantendo total conformidade com padrões ARIA.

O pacote inicial inclui primitivos para:

Accordion
Combobox
Grid
Listbox
Menu
Tabs
Toolbar
Tree.

Instalação:

npm i @angular/aria

Ferramentas e Testes: Vitest e MCP Server

O ecossistema de ferramentas recebeu grandes atualizações:

Vitest Estável: O Vitest é agora o executor de testes oficial e estável, substituindo o Karma em novos projetos. Ele oferece execução mais rápida e melhor integração com ferramentas modernas. `
- Comando de migração: ng g @schematics/angular:refactor-jasmine-vitest
MCP Server Estável: O “Model Context Protocol” do Angular permite que agentes de IA (como LLMs) interajam com seu projeto para fornecer contexto, buscar documentação atualizada e realizar migrações de código.
- Ferramentas inclusas:
  - get_best_practices
  - search_documentation
  - modernize
  - ai_tutor

Novos Schematics de Migração Automatizada

O Angular 21 introduz poderosas ferramentas de migração para modernizar bases de código existentes, removendo módulos legados e otimizando imports.

1. Migração do RouterTestingModule

Esta migração substitui o uso do RouterTestingModule em testes pelo RouterModule ou provideRouter, alinhando os testes com as práticas modernas de bootstrap de aplicações.

Comportamento Inteligente: Se o teste utiliza SpyLocation e acessa a propriedade urlChanges, o schematic automaticamente adiciona provideLocationMocks() para preservar o comportamento original do teste.

Comando:

ng generate @angular/core:router-testing-module-migration

2. CommonModule para Imports Standalone

Este schematic ajuda a limpar os imports de componentes Standalone. Ele remove o CommonModule (que carrega diretivas desnecessárias) e adiciona apenas o que o template realmente utiliza (como NgIf, NgFor, AsyncPipe, JsonPipe, etc.).

Comando:

ng generate @angular/core:common-to-standalone

Exemplo Prático (Antes):

import { CommonModule } from '@angular/common';

@Component({
  imports: [CommonModule], // Importa tudo
  template: `<div *ngIf="show">{{ data | async | json }}</div>`
})
export class ExampleComponent { ... }

Exemplo Prático (Depois):

import { AsyncPipe, JsonPipe, NgIf } from '@angular/common';

@Component({
  imports: [AsyncPipe, JsonPipe, NgIf], // Importa apenas o necessário (Tree-shakable)
  template: `<div *ngIf="show">{{ data | async | json }}</div>`
})
export class ExampleComponent { ... }

3. Migração de Estilos (NgClass e NgStyle)

Novos schematics convertem o uso das diretivas ngClass e ngStyle para os bindings nativos do Angular, reduzindo a verbosidade e removendo dependências.

Comandos:

ng generate @angular/core:ngclass-to-class

ng generate @angular/core:ngstyle-to-style

Detalhes Técnicos e Melhorias de DX

Além das migrações, o Angular 21 incluiu melhorias específicas para facilitar a vida do desenvolvedor:

Core e TypeScript:

SimpleChanges Genérico: Agora é possível tipar ngOnChanges (ex: SimpleChanges<User>), garantindo segurança de tipos ao verificar inputs.
HttpClient Padrão: O provideHttpClient é injetado automaticamente, não sendo mais obrigatório na configuração da aplicação.
Debug de Signals: Formatadores nativos para Signals no Chrome e Firefox facilitam a visualização de valores no console.

Templates e Pipes:

RegEx em Templates: Suporte para expressões regulares diretamente nos templates (ex: @let isNum = /\d+/.test(val)).
KeyValue Pipe: Agora suporta objetos com chaves opcionais sem erros de compilação.

HTTP e Interceptação:

Diagnóstico de CORS: As classes HttpResponse e HttpErrorResponse agora possuem a propriedade responseType (mapeada da Fetch API), facilitando a identificação de respostas opacas ou problemas de CORS.

Internacionalização (i18n):

CLDR v47: Atualização da biblioteca de dados de localidade (formatação de datas, moedas, etc.) da versão 41 para a 47.

Funcionalidades Avançadas:

@defer Customizável: Opções avançadas para o trigger viewport, permitindo configurar o IntersectionObserver (ex: rootMargin).
CDK e Material: Overlays agora utilizam a API nativa de Popover do navegador para melhor acessibilidade. Introdução de classes utilitárias para tokens de design do Material.
DevTools: Nova aba de “Transfer State” para inspecionar dados transferidos entre servidor e cliente (SSR).

Conclusão

O Angular 21 é uma versão abrangente que moderniza quase todos os aspectos do desenvolvimento com o framework. Ao estabelecer o Zoneless como padrão, adotar o Vitest e introduzir os Signal Forms, o Angular remove barreiras de entrada e complexidades que existiam há anos, alinhando-se com as expectativas modernas de performance e DX.

Além das grandes mudanças, a atenção aos detalhes — como as novas migrações automatizadas para RouterTestingModule e CommonModule, suporte a RegEx em templates e ferramentas de IA integradas — demonstra o compromisso do time em tornar o dia a dia do desenvolvedor mais produtivo. Seja iniciando um novo projeto ou migrando um existente, o Angular 21 oferece as ferramentas necessárias para construir a próxima geração de aplicações web.