DIARIO TECNOLÓGICO

LAS ÚLTIMAS NOTICIAS EN TECNOLOGÍA

Novedades de Angular 21 en 2025: Signal Forms, Zone-less, Vitest y desarrollo con IA

Novedades de Angular 21 en 2025: Signal Forms, Zone-less, Vitest y desarrollo con IA

Angular 21, lanzado a finales de 2025, incorpora un conjunto de cambios que definen las principales novedades del framework este año. Esta versión consolida el uso de signals, establece el modelo Zone-less como estándar y moderniza tanto el testing como el desarrollo asistido por inteligencia artificial.

Las novedades de Angular 21 en 2025 incluyen Signal Forms como nueva API de formularios, change detection Zone-less activado por defecto, Vitest como sustituto de Karma, directivas ARIA accesibles y un MCP server ampliado dentro del Angular CLI.

Novedades de Angular 21: contexto en 2025

A lo largo de 2024 y 2025, Angular ha evolucionado hacia un modelo más explícito y reactivo, apoyado en signals, inmutabilidad y detección de cambios controlada. Angular 21 consolida este enfoque y establece una base técnica orientada a rendimiento, accesibilidad y automatización.

Signal Forms: una de las principales novedades de Angular 21

Entre las novedades más destacadas de Angular 21 se encuentra Signal Forms, una nueva API experimental que permite definir formularios reactivos directamente a partir de un signal, reduciendo de forma significativa la complejidad de Reactive Forms.

Definición del formulario con signals

@Component({...})
export class FlightSearchComponent {

  filter = signal({
    from: 'Graz',
    to: 'Hamburg',
    details: {
      maxLayovers: 0,
      maxPrice: 200
    },
    layovers: [
      { airport: '', minDuration: 0 }
    ]
  });

  filterForm = form(this.filter, (path) => {
    required(path.from);
    minLength(path.from, 3);

    required(path.to);
    minLength(path.to, 3);
  });

}
  

Angular genera automáticamente un FieldTree, una estructura reactiva que gestiona el valor del campo, su estado y sus errores sin necesidad de FormGroup ni FormControl.

Zone-less por defecto: cambio estructural en Angular 21

Otra de las grandes novedades de Angular 21 en 2025 es que el framework funciona en modo Zone-less por defecto. Zone.js deja de ser un requisito para la detección de cambios.

Angular reacciona ahora únicamente a cambios en signals u observables, lo que reduce ejecuciones innecesarias de change detection y mejora la trazabilidad del flujo de datos.

Cómo volver a Zone.js si es necesario

bootstrapApplication(AppComponent, {
  providers: [
    provideZoneChangeDetection()
  ],
});
  

Vitest: nuevas capacidades de testing en Angular 21

En Angular 21, Vitest se convierte en el sistema de testing recomendado, sustituyendo progresivamente a Karma. Esta es una de las novedades más relevantes para proyectos nuevos y para la modernización de aplicaciones existentes.

Ejemplo de spy con Vitest

import { vi } from 'vitest';

vi.spyOn(flightService, 'find')
  .mockImplementation(() => of([]));
  

Vitest introduce fake timers modernos, ejecución paralela de tests y snapshot testing, alineando Angular con el ecosistema JavaScript actual.

Vitest Browser Mode

Otra de las novedades de Angular 21 es la posibilidad de ejecutar tests directamente en navegadores reales mediante el Browser Mode de Vitest, basado en Playwright.

import { page } from 'vitest/browser';

it('disables search button without params', async () => {
  await page.getByLabelText('from').fill('');
  await page.getByLabelText('to').fill('');

  const button = page
    .getByRole('button', { name: 'search' })
    .element() as HTMLButtonElement;

  expect(button.disabled).toBeTruthy();
});
  

@angular/aria: accesibilidad entre las novedades de Angular 21

Angular 21 introduce el paquete @angular/aria, que proporciona directivas headless para implementar patrones WAI-ARIA estándar sin imponer estilos visuales.

Estas directivas están pensadas como base para librerías de componentes accesibles y reutilizables.

MCP server: novedades para desarrollo con IA

Entre las novedades de Angular 21 en 2025 destaca la ampliación del MCP server integrado en el CLI, enfocado al desarrollo asistido por inteligencia artificial.

ng mcp --experimental-tools
  

El MCP server permite buscar documentación oficial, aplicar migraciones automáticas y utilizar un tutor interactivo de Angular impulsado por IA.

Conclusión

Las novedades de Angular 21 consolidan una plataforma más moderna, reactiva y preparada para el futuro. Signal Forms, Zone-less y Vitest representan cambios estructurales en la forma de desarrollar aplicaciones Angular.

Angular 21 define el rumbo del framework para los próximos años y marca un antes y un después en su arquitectura.