Lincoln Zocateli

Posted on Jun 15 • Originally published at zocate.li

Angular 22: reatividade, arquitetura e por que migrar

#portuguese #angular #typescript #frontend

Introdução

Angular 22 chegou em março de 2026 consolidando uma estratégia clara de reatividade e modernização da arquitetura framework. Se você trabalha com projetos corporativos de larga escala ou está decidindo entre Angular e React, este é o momento certo para entender por que Angular mudou radicalmente sua abordagem e o que isso significa para o seu stack.

Passei os últimos meses integrando Angular 22 em projetos complexos e percebi que grande parte da confusão que desenvolvedores têm vem de comparações superficiais ou de informações desatualizadas sobre o framework. Angular não é mais aquele framework monolítico e pesado dos primórdios do AngularJS. Com Signals, controle de fluxo moderno e suporte LTS robusto, Angular virou opção séria para quem quer arquitetura sólida sem sacrificar produtividade.

Neste artigo, vou cobrir desde a trajetória do Angular até as decisões arquiteturais concretas que fazem sentido para projetos reais, incluindo como Signals revolucionaram reatividade, por que sua política LTS importa, e quando Angular é a escolha certa frente a alternativas como React.

Pré-requisitos

Para acompanhar este artigo com aproveitamento máximo:

Familiaridade com TypeScript (tipos básicos, decoradores)
Experiência anterior com Angular (qualquer versão ≥ v14) ou React; os conceitos comparativos valem para ambos
Node.js 18+ ou gerenciador compatível (Bun, Deno)
Entendimento básico de padrões reativos (observables, promises) Se você é completamente novo em Angular, sugiro ler primeiro Começando com Angular: conceitos fundamentais antes de abordar este conteúdo.

Trajetória do Angular: de NgModule à era Standalone

Angular nasceu em 2010 como projeto interno do Google. A versão 1.x (AngularJS) foi revolucionária para seu tempo, mas enfrentou críticas sobre performance e escalabilidade. Em 2016, o Angular 2 foi reescrito do zero em TypeScript, marcando o ponto de ruptura.

Entre 2016 e 2022, o framework evoluiu de forma conservadora: NgModules eram obrigatórios, mudanças breaking era comuns entre versões major, e a curva de aprendizado era íngreme. Um novo projeto Angular implicava em boilerplate inevitável.

Tudo mudou entre Angular 14 (2022) e 22 (2026). O framework começou a converger para uma arquitetura standalone-first:

Angular 14 (2022): Standalone components apresentados como experimental
Angular 15 (2022): Standalone se torna opção viável; primeira iteração de Signals
Angular 16 (2023): Signals estáveis; hidratação SSR
Angular 17 (2023): Control flow novo (@if, @switch, @for); standalone como default em ng new
Angular 18 (2024): Zoneless tracking em preview; RxJS interop com Signals
Angular 19 (2024): Integração mais profunda Signals-RxJS
Angular 20 (2025): Material design atualizado; CLI refinamentos
Angular 22 (2026): Signals consolidadas; Zoneless em preview; RxJS interop robusto Essa trajetória importa porque explica por que migrar de v14 para v22 não é trivial — você não está apenas atualizando, você está adotando um novo paradigma de reatividade.

Angular 22 no Contexto Atual: Signals e Reatividade

A maior mudança em Angular 22 não é uma feature isolated; é a reorientação completa sobre como reatividade funciona.

Historicamente, Angular dependia de RxJS Observables como fonte de verdade. Observables são poderosos, mas exigem:

Declaração de tipos complexos (debounce, switchMap, takeUntil)
Estrutura mental baseada em streams
Pipe chain legível mas às vezes opaco Signals mudam isso. Um Signal é um primitive reativo: um recipiente de valor que notifica subscribers quando muda.

import { signal, computed, effect } from '@angular/core';

// Signal básico
const count = signal(0);

// Computed: derivado automaticamente
const doubleCount = computed(() => count() * 2);

// Effect: roda quando dependências mudam
effect(() => {
  console.log(`Count é agora ${count()}`);
});

// Atualizar é trivial
count.set(5);
count.update(v => v + 1);

Isso é simples demais quando você vem de RxJS. Não é magia—é um padrão reativo limpo sem complexidade desnecessária.

💡 Dica: Signals não substituem RxJS. Use RxJS para complexidade (networking, real-time, debounce). Use Signals para estado local e UI reativa simples. As funções toSignal() e toObservable() fazem a ponte.

Em Angular 22, zonas (Zone.js) começam a sair de cena. O framework pode agora rodar em modo “zoneless”—detectando mudanças apenas onde Signals mudaram, não em todo o app. Isso reduz overhead de detecção de mudanças drasticamente.

Arquitetura de Projetos Complexos com Angular 22

Quando escalamos Angular para projetos com centenas de componentes, decisões arquiteturais importam. Angular 22 oferece patterns claros:

Estrutura recomendada (2026)

src/
├── app/
│   ├── shared/
│   │   ├── components/        # componentes reutilizáveis
│   │   ├── directives/
│   │   ├── pipes/
│   │   └── services/          # lógica compartilhada
│   │
│   ├── core/
│   │   └── services/          # singleton services (auth, http)
│   │
│   ├── features/
│   │   ├── dashboard/
│   │   │   ├── dashboard.component.ts
│   │   │   ├── dashboard.routes.ts
│   │   │   └── services/      # services específicos da feature
│   │   │
│   │   └── products/
│   │       ├── product-list/
│   │       ├── product-detail/
│   │       └── services/
│   │
│   └── app.config.ts          # configuração global (providersArray)
│
└── main.ts

Por que essa estrutura?

Standalone components (default em Angular 22) vivem em features folder, cada um auto-contido
Lazy loading acontece via routing configuration em dashboard.routes.ts
Shared services centralizam lógica, evitando duplicação
Core services são singletons injetados na raiz da app

State Management em Angular 22

Para estado global, as opções maduras em 2026:

Opção	Caso de Uso
Signals + Services	Estado simples/médio; recomendado para novos projetos
NgRx (v17+)	Aplicações empresariais; fluxo unidirecional obrigatório
Akita	Alternativa mais simples ao NgRx; bom para médio porte
Mobx	Reatividade automática; integra bem com Signals

Para 90% dos projetos, Signals em um service singleton é suficiente:

export class UserService {
  private users = signal<User[]>([]);
  private selectedUser = signal<User | null>(null);

  readonly usersReadonly = users.asReadonly();
  readonly selectedUserReadonly = selectedUser.asReadonly();

  getUsers(): Promise<void> {
    return fetch('/api/users')
      .then(r => r.json())
      .then(data => this.users.set(data));
  }
}

Componentes injetam e usam sinais read-only—sem acesso direto a mutation.

Roadmap e Estratégia LTS do Angular

Angular segue calendário predictable de releases:

Major version a cada 6 meses: março e setembro
Versões ativas por 18 meses: 6 meses de suporte crítico + 12 de LTS

Timeline de Suporte (2026)

Versão	Release	Fim Active	Fim LTS
v20	Mar 2025	Mar 2026	Mar 2027
v21	Sep 2025	Sep 2026	Sep 2027
v22	Mar 2026	Sep 2027	Sep 2028
v23	Sep 2026	Mar 2028	Mar 2029

O que isso significa para você?

Se você migra para Angular 22 hoje (junho 2026), tem:

1 ano e 3 meses de suporte ativo (crítico + recurso)
2 anos e 3 meses total de suporte (segurança)
Path claro para v23 em setembro 2026 Projetos corporativos rodando v20 ainda têm 9 meses de LTS—tempo suficiente para planejar migração sem pressão.

ℹ️ Informação: O comando ng update em Angular 22 é robusto. Migrações entre versões consecutivas (v21 → v22) geralmente completam automaticamente com poucas alterações manuais.

Comparativo: Angular vs React

Essa é a pergunta que mais recebo. Não existem respostas absolutas, mas padrões claros.

Filosofia

Aspecto	Angular	React
Escopo	Full framework (routing, forms, HTTP, testes)	Library de views
Reatividade	Signals (primitives) + RxJS (streams)	Hooks + componentes funcionais
State Management	Integrado (NgRx, Signals)	Externo (Redux, Zustand, Jotai)
Learning Curve	Íngreme; mais conceitos upfront	Suave; incremental
Bundle Size	~140 KB (gzip)	~40 KB (React puro)
Rendering	Change detection automático	Explícito com useMemo/useCallback

Quando Escolher Angular

Projeto corporativo de longa duração (3+ anos)

Você quer estabilidade e previsibilidade

LTS de 18 meses por versão é segurança
TypeScript obrigatório alinha com rigor corporativo
Equipe grande, vários times

Conventions over configuration

Estrutura folder padrão
Menos liberdade, menos caos
Aplicação monolítica complexa (dashboard, admin panel)

Routing, forms validation, HTTP integrados

Menos decisões sobre “qual lib usar”
Real-time / WebSocket-heavy

RxJS Observables são naturais para streams

Signals + RxJS combo poderosa

Quando Escolher React

Prototipagem / MVP rápido

Curva menor

Comunidade enorme
Aplicação pequena a média (single page, landing page)

Bundle pequeno importa

Simplicidade de JSX
Equipe adora liberdade arquitetural

“Escolha suas libs”

Customização radical
Você já domina React

Tempo de mercado é o fator crítico

Expertise vale mais que tecnologia “ideal”

📝 Exemplo: Vejo projetos React bem-sucedidos rodando Nextjs + Redux + tRPC com 5 pessoas, e projetos Angular igualmente bem-sucedidos com times de 15. Não é sobre tecnologia—é sobre alinhamento.

npm, Bun e Deno no Ecossistema Angular

Um aspecto frequentemente ignorado: qual runtime/package manager usar com Angular 22?

npm (Node.js + npm/yarn/pnpm)

Maduro: ecosystem estável desde 2009
Default: ng new ainda gera para Node.js
Bundle: webpack (v5) via @angular/cli
Lock files: package-lock.json, yarn.lock, pnpm-lock.yaml

ng new app-angular-22
npm install
npm start

Recomendação: Mantenha npm/pnpm para produção se não tiver motivo forte para mudar.

Bun (~0.5x mais rápido que npm)

Rápido: instalação 2-5x mais rápida
Suporte: Angular 22 funciona com Bun, mas não é oficialmente “testado e validado”
Trade-off: Comunidade menor; problemas com certos pacotes nativos

bun create vite angular-app --template angular-ts
cd angular-app
bun install
bun run dev

Recomendação: Use em dev local. Produção ainda é Node.js.

Deno (Node.js compatível desde 2024)

Runtime moderno: sem package.json obrigatório
Segurança: permissões granulares (read, net, env)
Suporte: Angular 22 não tem suporte oficial; você teria que usar compatibilidade Node.js

// funcionaria via npm_imports em deno.json
import { bootstrap } from "npm:@angular/platform-browser-dynamic";

Recomendação: Espere. Deno+Angular ainda não é production-ready em 2026.

Pragmático: Use npm/pnpm em produção, Bun para dev local se o seu time curte velocidade.

CLI e Comandos Essenciais em Angular 22

O @angular/cli é seu melhor amigo. Aqui estão os comandos que realmente importam:

# Criar novo projeto (standalone, no TypeScript)
ng new meu-app --create-application

# Gerar componente standalone
ng generate component features/dashboard/dashboard --standalone

# Gerar service com dependency injection
ng generate service core/services/user

# Rodar dev server com changes hot
ng serve --open

# Build otimizado para produção
ng build --configuration production

# Atualizar Angular para versão nova
ng update @angular/cli @angular/core

# Executar testes unitários
ng test

# Lint e fix automático
ng lint --fix

Angular 22 ng update é robusto o suficiente para atualizar entre versões consecutivas quasi-automaticamente. Teste sempre em branch; sempre há edge cases.

Exemplo Prático: Dashboard Reativo com Signals

Vou mostrar um exemplo real que você pode reusar: um dashboard simples com estado em Signals, sem NgRx.

// user.service.ts
import { Injectable, signal } from '@angular/core';

export interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({ providedIn: 'root' })
export class UserService {
  private usersSignal = signal<User[]>([]);
  private loadingSignal = signal(false);

  readonly users = this.usersSignal.asReadonly();
  readonly loading = this.loadingSignal.asReadonly();

  loadUsers(): void {
    this.loadingSignal.set(true);
    // Simular fetch
    setTimeout(() => {
      this.usersSignal.set([
        { id: 1, name: 'Alice', email: '[email protected]' },
        { id: 2, name: 'Bob', email: '[email protected]' },
      ]);
      this.loadingSignal.set(false);
    }, 1000);
  }
}

// dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserService } from '../../core/services/user.service';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="dashboard">
      <h1>Dashboard</h1>

      <button (click)="userService.loadUsers()">
        Load Users
      </button>

      @if (userService.loading()) {
        <p>Loading...</p>
      } @else {
        <ul>
          @for (user of userService.users(); track user.id) {
            <li>{{ user.name }} ({{ user.email }})</li>
          }
        </ul>
      }
    </div>
  `,
  styles: [`
    .dashboard { padding: 20px; }
    button { padding: 8px 16px; cursor: pointer; }
  `]
})
export class DashboardComponent implements OnInit {
  constructor(public userService: UserService) {}

  ngOnInit(): void {
    this.userService.loadUsers();
  }
}

Este exemplo ilustra:

Signal em service para estado (usersSignal)
asReadonly() para encapsulamento
@if / @for novo control flow
Standalone component (sem NgModule)
CommonModule injetado localmente 📂 Codigo Fonte: Exemplo completo da arquitetura recomendada (2026), incluindo core, shared, features e rotas por modulo: BlogSamples/Frontend/Angular22/Recommended2026/

Dicas e Boas Práticas

Comece com Signals para novo estado, não RxJS imediatamente

Signals são mais legíveis para state UI simples. Reserve RxJS para comportamento complexo (debounce, switchMap). A tendência é Signals crescerem; evite technical debt RxJS onde não faz sentido.

Use readonly Signals em componentes injetados

Nunca passe signal.set() direto para componentes filhos. Use signal.asReadonly() em services e mutações isoladas em métodos. Isso reduz acoplamento e bugs silenciosos.

Lazy load features via routing

Define rotas com loadComponent ou loadChildren para cada feature. Bundle é reduzido drasticamente. Apenas dashboard e auth carregam na inicialização.

Evite mudanças breaking entre minor versions

Angular 22.1.x, 22.2.x são backward-compatible. Mas entre v22 → v23, quebre breaking changes podem ocorrer. Teste sempre em CI/CD.

RxJS toObservable() em formulários complexos

Se seu formulário tem validação assíncrona ou watchers encadeados, converta Signals para Observables com toObservable(). RxJS operators (debounceTime, switchMap) encaixam naturalmente.

Resumo Objetivo

Angular 22 — versão major de março 2026, consolidando Signals como primitive reativo padrão, com RxJS integrado para casos complexos e suporte LTS de 18 meses (6 ativo + 12 crítico).
Signals — containers reativos simples que substituem boa parte de RxJS no código corporativo; signal(), computed() e effect() formam o trio essencial; asReadonly() encapsula mutação.
Standalone Components — padrão default em Angular 22; NgModules não obrigatórios; cada componente declara suas dependências via imports, reduzindo boilerplate.
Arquitetura Recomendada — features folder com lazy loading, core services singletons, shared components/pipes; Signals em services para estado, NgRx/Akita para apps empresariais gigantes.
LTS Strategy — Angular 22 ativo até setembro 2027, LTS até setembro 2028; ng update automatiza migrações entre versões; planos corporativos devem usar v20 ou v22 agora.
Angular vs React — Angular para projetos complexos, long-term, time grande; React para protótipo, MVP, liberdade arquitetural; tecnologia importa menos que alinhamento e expertise.
npm/Bun/Deno — npm/pnpm produção-ready; Bun dev-only por velocidade; Deno não é Angular-ready ainda.
Control Flow Novo — @if, @switch, @for substituem *ngIf, *ngSwitch, *ngFor; sintaxe mais legível, performance melhor em zone-less mode.

Referências

Angular Official Documentation — angular.dev — documentação oficial de Angular 22, incluindo guides de Signals, routing e migração
Angular Release Schedule — calendário oficial de releases, suporte LTS e políticas de breaking changes
Signals Documentation — Angular Docs — guia detalhado sobre Signals, computed(), effect() e RxJS interop
RxJS Integration with Signals — toSignal(), toObservable() e padrões de migração RxJS → Signals
Angular CLI Command Reference — documentação completa de ng serve, ng generate, ng update e comandos de deployment 📬

👉 Artigo completo com todos os exemplos de código: Angular 22: reatividade, arquitetura e por que migrar

DEV Community