Conhecendo as novidades do Angular 21

Não é novidade que o time do Angular está sempre querendo modernizar o framework, e a versão 21 traz novas funcionalidades interessantes e evoluções importantes.

Como migro de versão?

Siga o guia de migração

Esse guia te disponibiliza como fazer a migração desde aplicações de pequeno porte até aplicações gigantes.

HttpClient habilitado por padrão

Sim!!! Quando criarmos novas aplicações, não será mais necessário adicionar o provider "provideHttpClient()" dentro dos providers do app.config.ts.

AH MAS MINHA APLICAÇÃO É COM SSR EU PRECISO DO FETCH API

Tá bom, tá bom... Aí você adiciona o provideHttpClient(withFetch())

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient(withFetch())]
}

E sua aplicação vai poder usar fetch api sem problema nenhum.

Vitest

Finalmente estamos vendo de perto a substituição do Karma dentro do framework, para o Vitest.
Por padrão, na criação de um projeto Angular 21+, o Karma já não vai vir instalado junto do Jasmine, assim dando espaço ao Vitest (que virá instalado nas dependências do projeto).

E quando rodamos o comando de teste ng test, recebemos a seguinte mensagem:

NOTE: The "unit-test" builder is currently EXPERIMENTAL and not ready for production use.

Dentro do arquivo angular.json, na propriedade de "test"

"test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "coverageReporters": ["cobertura", "lcov", "html"]
          }
        }
      }

Dentro das options, se adicionarmos a propriedade "runner", veremos que o "default" é o Vitest, enquanto o karma ainda continua aparecendo mas já não é a opção padrão.
E caso precisemos configurar a cobertura do nosso projeto, dentro das options conseguimos fazer a configuração dos reporters, watermarks, threshold, include, exclude, coverage... enfim, várias opções que facilitam o nosso dia a dia dentro de um projeto Angular.

E é muito bom ver essa evolução com relação aos testes unitários, trocando o test runner.

"AI MAS E O JEST????"
Atualmente o Jest ainda possui problemas com ESModules, algo que projetos com Typescript e ainda mais Angular, usam bastante. Você pode utilizar o jest-preset-angular, porém sabendo que existe algo nativo do framework, fica mais fácil usar o que já vem pré pronto do que fazer mais uma configuração de mais um arquivo pra rodar seus testes unitários.

Tailwind

Durante a criação de um novo projeto Angular

ng new my-app

Foi colocada uma nova opção para os estilos. Além do lendário SCSS, Less e CSS, agora podemos escolher Tailwind diretamente.

Signals Form

O signals form é uma nova API pública do Angular na qual poderemos criar e gerenciar formulários reativos, com uso de Signals.

Essa nova API vem de maneira simplificada, melhorando a experiência do desenvolvedor, nos fazendo escrever um código mais limpo e performático de manter.

import { Component, signal } from '@angular/core';
import { form, minLength, required, schema, submit, Field, pattern } from '@angular/forms/signals';

type Login = {
  email: string;
  password: string;
};

const loginSchema = schema<Login>((path) => {
  required(path.email);
  required(path.password);

  minLength(path.password, 8);
  pattern(path.email, /^[^\s@]+@[^\s@]+\.[^\s@]+$/);
});

@Component({
  selector: 'app-root',
  imports: [Field],
  template: `<h1>Login</h1>
<form>
  <div>
    <label for="email">Email</label>
    <input id="email" type="email" name="email" [field]="loginForm.email" />
  </div>
  <div>
    <label for="password">Password:</label>
    <input id="password" type="password" name="password" [field]="loginForm.password" />
  </div>
  <button type="button" aria-label="Login" (click)="enter()">Login</button>
</form>
`,
  styleUrl: './app.css'
})
export class App {
  readonly login = signal<Login>({ email: '', password: '' });

  readonly loginForm = form(this.login, loginSchema);

  enter() {
    submit(this.loginForm, async (form) => {
      console.log('Submitted with', form);

      return null; // if everything is okay just return null
    });
  }
}

Zoneless

No angular 20.2, o time do Angular trabalhou em deixar o zoneless stable (anteriormente em developer preview). Na versão 21, zoneless é o padrão dentro do framework. Ou seja, estamos cada vez mais inclinados a ter uma aplicação menos dependente do zonejs, e seguindo cada vez mais firme na direção de uso com Signals.

É importante ressaltar que em processos assíncronos, devemos detectar mudanças. Então vamos ter que prestar mais atenção, porque se de um lado tínhamos uma biblioteca que por debaixo dos panos cuidava de processos assíncronos e notificava o framework que ocorreram mudanças, agora com o zoneless, em alguns momentos deveremos notificar o framework que alguma mudança possa ter acontecido (utilizando o ChangeDetectorRef).

Conclusão

Muitas são as novidades do framework, o caminho para aplicações mais reativas com signals + zoneless + OnPush está bem na nossa frente. Também melhorias pontuais como adicionar Tailwind de forma automática durante a criação de projeto, test runners novos. Essas pequenas mudanças estruturais, no fim do dia, nos fazem termos mais produtividade e escrevendo menos código.

Você pode checar as mudanças do Angular 21 no Blog do Angular

Comments

[Diego Martinez]

Curti demais o resumo das novidades do Angular 21, especialmente Vitest, Tailwind na criação do projeto e Signals Form. Ficou bem direto e prático, excelente visão geral para quem quer atualizar a stack sem se perder na documentação oficial.