DEV Community

Erick Gabriel dos Santos Alves
Erick Gabriel dos Santos Alves

Posted on

Angular 22: O Framework finalmente encontrou sua identidade?

#angular #typescript #frontend #braziliandevs

Fala, comunidade dev! 👋

Durante anos, uma crítica acompanhou o Angular em praticamente toda discussão sobre Front-end:

"O Angular é poderoso, mas complexo."

E, para ser justo, essa crítica tinha fundamento.
NgModules, Zone.js, Change Detection global, decorators em excesso, Reactive Forms verbosos e uma curva de aprendizado considerável fizeram muita gente migrar para alternativas consideradas mais simples.

Mas algo interessante aconteceu entre o Angular 16 e o Angular 22.

Pela primeira vez desde o lançamento do Ivy, não parece que estamos vendo apenas uma sequência de novas funcionalidades. Estamos vendo uma direção arquitetural clara.

O Angular 22 não é importante por causa de uma única feature. Ele é importante porque consolida uma transformação iniciada anos atrás: Angular agora é oficialmente um framework Signal-First.

O Angular de 2026 é muito diferente do Angular de 2020

Se você ficou alguns anos longe do framework, provavelmente lembrará de algo assim:

  • AppModule
  • SharedModule
  • Guards em Classes
  • Change Detection padrão
  • Zone.js
  • Reactive Forms
  • Webpack
  • RxJS para praticamente tudo

Hoje um projeto Angular moderno nasce com:

  • Standalone Components
  • Functional Guards
  • inject()
  • Signals
  • Signal Forms
  • Resource API
  • OnPush por padrão
  • Hydration
  • Esbuild + Vite
  • SSR de primeira classe

A quantidade de conceitos obrigatórios diminuiu drasticamente. E talvez essa seja a maior evolução do framework.

1. OnPush finalmente virou o padrão

Durante anos praticamente todo desenvolvedor Angular experiente fazia isso:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent {}
Enter fullscreen mode Exit fullscreen mode

Por quê? Porque o comportamento padrão verificava componentes demais.
Agora o Angular oficializou essa prática. Você não precisa mais adicionar OnPush manualmente em cada componente.

Parece uma mudança pequena. Não é. Ela mostra que o framework assumiu definitivamente uma arquitetura baseada em reatividade explícita.

  • Menos verificações globais.
  • Menos trabalho para CPU.
  • Mais previsibilidade.
  • Mais performance.

2. Signals deixaram de ser novidade e viraram fundação

Quando Signals apareceram no Angular 16, muita gente tratou como uma funcionalidade interessante. No Angular 22 eles já fazem parte da identidade do framework.

Antes:

export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}
Enter fullscreen mode Exit fullscreen mode

Agora:

import { signal } from '@angular/core';

export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(value => value + 1);
  }
}
Enter fullscreen mode Exit fullscreen mode

Template:

<button (click)="increment()">
  {{ count() }}
</button>
Enter fullscreen mode Exit fullscreen mode

A principal diferença é que o Angular sabe exatamente quem depende daquele estado. Nada de verificações desnecessárias.

3. Computed Signals: reatividade sem esforço

Uma das APIs mais elegantes introduzidas pelo framework.

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

export class PedidoComponent {
  itens = signal([
    { valor: 100 },
    { valor: 200 }
  ]);

  total = computed(() =>
    this.itens().reduce(
      (acc, item) => acc + item.valor,
      0
    )
  );
}
Enter fullscreen mode Exit fullscreen mode

Template:

Total: {{ total() }}
Enter fullscreen mode Exit fullscreen mode

Sempre que a lista mudar, o total será recalculado automaticamente.

  • Sem subscriptions.
  • Sem Subjects.
  • Sem RxJS.
  • Sem código extra.

4. Signal Forms finalmente ficaram prontos para produção

Quando os Signals foram lançados, a pergunta era inevitável: "Mas e os formulários?"

A resposta demorou alguns releases. Agora chegou. Signal Forms se tornaram uma alternativa moderna aos tradicionais Reactive Forms.

Reactive Forms:

form = new FormGroup({
  nome: new FormControl(''),
  email: new FormControl('')
});
Enter fullscreen mode Exit fullscreen mode

Abordagem baseada em Signals:

import { signal } from '@angular/core';

export class UsuarioComponent {
  form = signal({
    nome: '',
    email: ''
  });

  atualizarNome(nome: string) {
    this.form.update(v => ({
      ...v,
      nome
    }));
  }
}
Enter fullscreen mode Exit fullscreen mode

Os formulários ficam mais próximos da arquitetura reativa moderna do framework.

  • Menos boilerplate.
  • Mais previsibilidade.
  • Melhor tipagem.

5. Resource API: a evolução mais subestimada do Angular

Essa talvez seja a feature mais importante que pouca gente está comentando.
Historicamente tínhamos duas opções: Observable ou Promise.
Agora temos Resources.

Exemplo simplificado:

import { resource } from '@angular/core';

usuarios = resource({
  loader: () =>
    fetch('/api/users')
      .then(r => r.json())
});
Enter fullscreen mode Exit fullscreen mode

Template:

@if (usuarios.isLoading()) {
  <p>Carregando...</p>
}

@if (usuarios.hasValue()) {
  <app-user-list
    [users]="usuarios.value()">
  </app-user-list>
}
Enter fullscreen mode Exit fullscreen mode

A Resource encapsula: Dados, Loading, Error, Reload e Cancelamento. Tudo integrado com Signals. Não substitui RxJS, mas elimina uma enorme quantidade de código para casos simples.

6. inject() mudou a forma de escrever Angular

Durante anos escrevemos isso:

constructor(
  private http: HttpClient,
  private router: Router
) {}
Enter fullscreen mode Exit fullscreen mode

Agora:

private http = inject(HttpClient);
private router = inject(Router);
Enter fullscreen mode Exit fullscreen mode

Ou dentro de uma Functional Guard:

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};
Enter fullscreen mode Exit fullscreen mode

A API ficou mais limpa, mais funcional e mais fácil de compor.

7. O Angular está cada vez mais Zone-less

Se existe uma palavra que define a evolução recente do Angular, ela é: Controle.

Durante anos o framework monitorava tudo através do Zone.js. Hoje temos:

  • Signals
  • OnPush
  • Resources
  • Renderização mais previsível

Tudo aponta para a mesma direção: Menos mágica. Mais controle. Mais performance. O Angular ainda suporta Zone.js. Mas é evidente que o futuro não gira mais em torno dele.

8. SSR e Hydration estão amadurecendo rapidamente

Durante muito tempo SSR parecia uma funcionalidade opcional. Hoje não.

Configuração básica:

bootstrapApplication(
  AppComponent,
  {
    providers: [
      provideClientHydration()
    ]
  }
);
Enter fullscreen mode Exit fullscreen mode

O Angular reutiliza o HTML renderizado pelo servidor em vez de reconstruir toda a tela.
Benefícios:

  • Melhor SEO
  • Melhor LCP
  • Melhor experiência mobile
  • Menos JavaScript executado

9. O HTTP Client também evoluiu

Outra mudança pouco comentada. Agora é possível utilizar Fetch como backend principal:

bootstrapApplication(
  AppComponent,
  {
    providers: [
      provideHttpClient(
        withFetch()
      )
    ]
  }
);
Enter fullscreen mode Exit fullscreen mode

Isso aproxima o Angular dos padrões modernos da Web. Menos dependências legadas. Mais alinhamento com o ecossistema JavaScript.

10. Angular e IA: o início de uma nova fase

O time do Angular está investindo cada vez mais em integração com ferramentas de IA. Estamos vendo iniciativas envolvendo:

  • WebMCP
  • Agent Skills
  • Ferramentas para assistentes inteligentes
  • Melhor suporte a automação

Ainda é cedo para saber o impacto real. Mas o sinal é claro: O Angular quer ser um framework preparado para um futuro onde IA participa ativamente do desenvolvimento.

O que esperar do Angular 23, 24 e além?

Se eu tivesse que apostar no futuro do framework, apostaria em cinco movimentos:

  1. Menos RxJS obrigatório: RxJS continuará relevante, mas cada vez mais opcional.
  2. Mais APIs baseadas em Signals: Signals se tornaram o centro da arquitetura. Tudo novo gira em torno deles.
  3. Zone.js cada vez menos relevante: A direção do framework é clara.
  4. Build ainda mais rápido: Esbuild e Vite foram apenas o começo.
  5. IA integrada ao fluxo de desenvolvimento: O Angular já começou a investir nessa direção.

Conclusão

Angular 22 não impressiona por uma única funcionalidade. Ele impressiona porque fecha vários ciclos iniciados anos atrás.

Signals amadureceram. Signal Forms amadureceram. Resources amadureceram. OnPush virou padrão. SSR evoluiu. O ecossistema de build ficou absurdamente rápido. O framework ficou mais previsível, mais performático e mais alinhado com a Web moderna.

Depois de acompanhar a evolução do Angular desde a era dos NgModules gigantes e do Webpack dominando tudo, talvez a melhor definição seja esta:

O Angular finalmente parece um framework que sabe exatamente para onde está indo. E isso é algo que não acontecia há bastante tempo.

E você? Qual foi a mudança mais importante do Angular nos últimos anos? Deixe nos comentários! 👇

Top comments (0)