🚀 Novidades do Angular 21 | Angular

• 🚀 Novidades do Angular 21 | Angular

---

🔄 Como migrar para a nova versão?

Siga o Guia de Migração disponibilizado pelo próprio Angular.

Esse guia explica como fazer a migração desde aplicações pequenas até aplicações de grande porte, garantindo uma transição segura.

---

🌐 HttpClient habilitado por padrão

Sim! A partir do Angular 21, ao criar novas aplicações não será mais necessário adicionar o provider provideHttpClient() no app.config.ts.

Mas e no SSR?

Se sua aplicação usa SSR e você precisa da Fetch API, basta adicionar:

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

Assim, sua aplicação poderá usar a Fetch API sem problemas.

---

🧪 Vitest substituindo o Karma

Finalmente vemos a substituição do Karma pelo Vitest dentro do framework.

Nos projetos Angular 21+, o Karma e o Jasmine não são mais instalados por padrão, dando espaço ao Vitest, já incluído nas dependências.

Ao rodar o comando:

ng test

Você verá a mensagem:

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

No angular.json, a configuração fica assim:

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

Dentro de options, se adicionarmos runner, veremos que:

• O default é o Vitest
• O Karma ainda aparece, mas não é mais padrão

Há diversas configurações possíveis: reporters, watermarks, threshold, include, exclude, coverage etc. Isso facilita muito o trabalho com testes unitários no Angular.

🤔 E o Jest?

Atualmente o Jest tem problemas com ESModules, muito usados em projetos TypeScript e Angular.

É possível usar o jest-preset-angular, mas como o framework agora fornece algo nativo, é mais prático usar o que já vem configurado.

---

🎨 Tailwind integrado na criação do projeto

Ao criar um novo projeto:

ng new my-app

Agora, além de SCSS, Less e CSS, você pode escolher Tailwind diretamente nas opções do Angular CLI. Uma adição muito bem-vinda!

---

🔐 Signals Form

O Signals Form é uma nova API pública do Angular para criação e gerenciamento de formulários reativos usando Signals.

Essa API chega para simplificar:

• código mais limpo
• maior performance
• experiência mais fluida

Exemplo:

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 por padrão

No Angular 20.2, o Zoneless se tornou stable. Agora, no Angular 21, ele é o padrão do framework.

Isso significa:

• Menos dependência do zone.js
• Maior adoção do Signals
• Aplicações mais performáticas e previsíveis

Observação importante

Sem Zone.js:

• Processos assíncronos não notificam automaticamente o framework
• Em alguns momentos será necessário chamar manualmente o ChangeDetectorRef

Ou seja, mais controle em troca de um pouco mais de responsabilidade.

---

🧾 Conclusão

As novidades do Angular 21 reforçam o caminho para aplicações mais reativas com:

• Signals
• Zoneless
• OnPush

Além disso:

• Tailwind nativo no ng new
• Novo test runner (Vitest)
• Melhorias estruturais que simplificam o dia a dia

No fim, todas essas mudanças aumentam a produtividade e reduzem a necessidade de configurações extras.

Você pode conferir todas as mudanças no Blog oficial do Angular.

---