Angular 21: Todas las novedades que debes conocer

Angular 21 fue lanzado el 20 de noviembre de 2025, trayendo mejoras significativas en rendimiento, experiencia de desarrollador, integración con IA y accesibilidad. En este artículo exploraremos todas las novedades de esta versión.

Signal Forms (Experimental)

Una de las características más destacadas de Angular 21 es la introducción de Signal Forms, una nueva API experimental de formularios construida sobre Signals.

import { SignalForm, field, validators } from '@angular/forms/signals';

@Component({
  template: `
    <form [signalForm]="form">
      <input [field]="form.fields.email" />
      @if (form.fields.email.errors()) {
        <span class="error">{{ form.fields.email.errors()?.message }}</span>
      }
    </form>
  `
})
export class LoginComponent {
  form = new SignalForm({
    email: field('', [validators.required, validators.email]),
    password: field('', [validators.required, validators.minLength(8)])
  });
}

Ventajas de Signal Forms

Mejor tipado: Type-safety completa en todo el formulario
Validación simplificada: Mensajes de error personalizados por campo
Reactividad nativa: Integración perfecta con el sistema de Signals
Migración gradual: Capa de compatibilidad con @angular/forms/signals/compat

Zoneless por Defecto

Con Angular 20.2, la detección de cambios sin Zone.js alcanzó estabilidad. Angular 21 da el siguiente paso haciendo zoneless el comportamiento por defecto para nuevas aplicaciones.

// Angular 21 - Ya no necesitas esto para nuevas apps
// Solo si migras desde una app existente que usa Zone.js
bootstrapApplication(AppComponent, {
  providers: [
    provideZoneChangeDetection() // Solo si necesitas Zone.js
  ]
});

Cambios en Testing

Los tests de componentes ahora usan await fixture.whenStable() en lugar de fixture.detectChanges():

it('should update the view', async () => {
  component.name.set('Angular 21');
  await fixture.whenStable();
  expect(fixture.nativeElement.textContent).toContain('Angular 21');
});

Vitest como Framework de Testing por Defecto

Angular 21 reemplaza Karma/Jasmine por Vitest como el framework de testing predeterminado. Esto significa tests más rápidos y una configuración más simple.

// angular.json
{
  "test": {
    "builder": "@angular/build:test",
    "options": {
      "coverage": true,
      "browsers": ["chromium"],
      "reporters": ["default", "html"]
    }
  }
}

Migración de Jasmine a Vitest

Angular proporciona un generador para migrar tus tests existentes:

ng generate refactor-jasmine-vitest

Si prefieres seguir usando Karma, puedes especificarlo con --test-runner=karma al crear un nuevo proyecto.

Angular Aria (Developer Preview)

El nuevo paquete @angular/aria proporciona directivas headless y accesibles que implementan patrones ARIA comunes:

Accordion
Autocomplete
ComboBox
Grid
ListBox
Menu
Multiselect
Select
Tabs
Toolbar
Tree

import { AriaListbox, AriaOption } from '@angular/aria';

@Component({
  imports: [AriaListbox, AriaOption],
  template: `
    <ul ariaListbox>
      @for (option of options(); track option.id) {
        <li [ariaOption]="option">{{ option.label }}</li>
      }
    </ul>
  `
})
export class SelectComponent {
  options = signal([
    { id: 1, label: 'Opción 1' },
    { id: 2, label: 'Opción 2' }
  ]);
}

Estas directivas manejan automáticamente:

Interacciones de teclado
Atributos ARIA
Gestión del focus
Soporte para lectores de pantalla

HttpClient Mejorado

HttpClient ahora está provisto en el root injector por defecto. Ya no necesitas provideHttpClient() a menos que requieras configuración personalizada.

// Angular 21 - HttpClient ya está disponible
@Injectable({ providedIn: 'root' })
export class ApiService {
  private http = inject(HttpClient);

  getData() {
    return this.http.get('/api/data', {
      responseType: 'json',
      referrerPolicy: 'no-referrer' // Nueva opción
    });
  }
}

Herramientas de IA y MCP Server

Angular 21 incluye mejoras significativas en las herramientas de desarrollo con IA:

Angular MCP Server

El servidor MCP ahora ofrece 7 herramientas para integración con agentes de IA:

Herramienta	Estado	Descripción
`list_projects`	Estable	Lista proyectos Angular en el workspace
`get_best_practices`	Estable	Proporciona mejores prácticas actualizadas
`find_examples`	Estable	Encuentra ejemplos de código
`search_documentation`	Estable	Búsqueda de documentación por versión
`modernize`	Experimental	Ejecuta migraciones automáticas
`ai_tutor`	Nuevo	Asistente de aprendizaje interactivo
`onpush_zoneless_migration`	Nuevo	Planificación de migración a zoneless

Integración con Tailwind CSS

Nuevo schematic para configurar Tailwind CSS fácilmente:

ng new my-app --style tailwind

Esto configura automáticamente:

tailwindcss
@tailwindcss/postcss
postcss
Archivo .postcssrc.json mínimo

Mejoras en Templates

RegExp en Templates

Ahora puedes usar expresiones regulares directamente en templates:

@if (/^[a-z]+$/i.test(value())) {
  <span>Valor válido</span>
}

Trigger viewport mejorado para @defer

El trigger viewport ahora soporta opciones de IntersectionObserver:

@defer (on viewport(rootMargin: '100px')) {
  <heavy-component />
}

Otras Mejoras Notables

SimpleChanges tipado

ngOnChanges(changes: SimpleChanges<MyComponent>) {
  if (changes.name) {
    // changes.name tiene el tipo correcto
    console.log(changes.name.currentValue);
  }
}

Variables en ng serve

ng serve --define="API_URL=http://localhost:3000"

Salida JSON para ng version

ng version --json

Cómo Actualizar

Para actualizar tu proyecto a Angular 21:

ng update @angular/core@21 @angular/cli@21

Las migraciones automáticas se encargarán de:

Agregar provideZoneChangeDetection() si usas Zone.js
Actualizar imports de CommonModule a standalone
Migrar NgClass y NgStyle a bindings nativos

Conclusión

Angular 21 representa un paso importante hacia un framework más moderno, reactivo y accesible. Las Signal Forms, zoneless por defecto, y las herramientas de IA demuestran el compromiso del equipo de Angular con la innovación.

Si estás iniciando un nuevo proyecto, aprovecha todas estas características desde el día uno. Si tienes un proyecto existente, las herramientas de migración facilitan la transición gradual.

Fuentes: