¿Cuándo se lanzó Angular 21?

Angular 21 se lanzó en diciembre de 2025. Es una versión mayor que reemplaza Karma por Vitest como test runner por defecto, hace que zone.js sea opt-out en proyectos nuevos, e introduce Signal Forms como característica experimental.

¿Se elimina Karma en Angular 21?

Sí. Angular 21 reemplaza Karma por Vitest como test runner por defecto en proyectos nuevos. Los proyectos existentes aún pueden usar Karma manteniendo manualmente @angular/build:karma, pero se recomienda migrar a Vitest. Ejecuta ng generate @angular/core:karma-to-vitest para migrar automáticamente configuraciones estándar.

¿Cómo actualizo de Angular 20 a Angular 21?

Primero actualiza tu CLI global: npm install -g @angular/cli@latest. Luego actualiza tu proyecto: ng update @angular/cli@21 @angular/core@21. Después, ejecuta ng test para detectar problemas del test runner, y opcionalmente ejecuta ng generate @angular/core:karma-to-vitest para migrar de Karma a Vitest.

¿Se elimina zone.js en Angular 21?

zone.js no se elimina, pero ahora está excluido por defecto en proyectos nuevos de Angular 21 generados con ng new. Los proyectos existentes siguen usando zone.js a menos que ejecutes explícitamente la migración zoneless: ng generate @angular/core:zoneless-migration.

¿Cuáles son los principales breaking changes de Angular 21?

Los tres cambios mayores son: (1) Karma es reemplazado por Vitest como test runner por defecto; (2) HttpClient ahora se provee en el injector raíz por defecto, así que las llamadas explícitas a provideHttpClient() pueden ser redundantes; (3) las apps nuevas excluyen zone.js por defecto. Las directivas ngClass y ngStyle también quedan soft-deprecated en favor de los bindings [class.x] y [style.x].

Angular 21: Fecha de Lanzamiento, Nuevas Funciones y Guía de Actualización

Si pensabas que Angular 20 fue un gran cambio, bienvenido a Angular 21.

Mientras la versión 20 trataba de estabilizar Signals, la versión 21 trata de mejorar la experiencia del desarrollador. Angular ha cambiado fundamentalmente: zone.js es opcional, Karma está muerto y RxJS parece ser reemplazado lentamente.

Esto no es solo una actualización; se siente como todo un ecosistema nuevo. Aquí está lo que se va a romper y cómo arreglarlo.

TL;DR — actualiza de Angular 20 a 21 con 4 comandos:

npm install -g @angular/cli@latest ng update @angular/cli@21 @angular/core@21 ng generate @angular/core:karma-to-vitest ng test

Los tres cambios que más probablemente te afecten: Karma es reemplazado por Vitest como test runner por defecto, HttpClient ahora se provee automáticamente en el inyector raíz y las apps nuevas excluyen zone.js. Abajo el detalle y la solución de cada uno.

Lo crítico que detienen todo

Antes de ejecutar ng update, ten en cuenta que tu compilación probablemente fallará si dependes de estos patrones heredados.

Breaking change	Qué se rompe	Solución
Karma → Vitest es el predeterminado	`karma.conf.js` personalizado o plugins/reportadores específicos de Karma	`ng generate @angular/core:karma-to-vitest`
`HttpClient` se provee automáticamente en el inyector raíz	Tests que simulan `HttpClient` como ausente; orden de interceptores en apps mixtas NgModule/Standalone	Elimina las llamadas redundantes a `provideHttpClient()` salvo que pases opciones
`zone.js` excluido en apps nuevas	Copiar código de un tutorial v21 en una app v20 existente mezcla suposiciones Zoneless y Zone.js	Entiende Zoneless antes de mezclar, o migra explícitamente con `ng generate @angular/core:zoneless-migration`

1. El Evento de Extinción de Karma (¿Cómo Migrar de Karma a Vitest en Angular 21?)

El choque más inmediato para muchos equipos será ng test. Angular 21 ha cambiado oficialmente Karma por Vitest como el ejecutor de pruebas predeterminado.

Qué se rompe: Si tienes un karma.conf.js personalizado o dependes de complementos/reportadores específicos de Karma, tu suite de pruebas es ahora código heredado.

La solución:

Nuevos proyectos: Obtienes Vitest desde el principio. Es más rápido, más limpio y usa Vite.
Proyectos existentes: No estás obligado a cambiar inmediatamente, pero el final está cerca. El CLI te insistirá.
Migración: Ejecuta ng generate @angular/core:karma-to-vitest para intentar una auto-migración. Es notablemente bueno convirtiendo configuraciones estándar, pero los trucos personalizados de Webpack en tu configuración de pruebas necesitarán reescritura manual para Vite.

2. HttpClient está “simplemente ahí”.

¿Recuerdas añadir provideHttpClient() a tu app.config.ts o importar HttpClientModule?

El cambio: HttpClient ahora se inyecta por defecto en el inyector raíz.

Qué se rompe:

Si tienes pruebas que simulan HttpClient esperando que no esté allí, podrían fallar.
Si dependes de HttpClientModule para un orden complejo de interceptores en una aplicación mixta NgModule/Standalone, podrías ver cambios sutiles de comportamiento.

La solución: Elimina las llamadas explícitas a provideHttpClient() a menos que estés pasando opciones de configuración (como withInterceptors o withFetch). Limpia tu configuración, pero comprueba el orden de ejecución de tus interceptores.

3. zone.js se ha ido (para nuevas apps).

Las nuevas aplicaciones generadas con ng new excluirán zone.js por defecto.

Qué se rompe: Nada para las aplicaciones existentes (todavía). Tu polyfils.ts seguirá importando Zone.

La advertencia: Si copias y pegas código de un tutorial nuevo de v21 en tu aplicación v20 existente, podría asumir un comportamiento Zoneless (usando menos ChangeDetectorRef, confiando en Signals). Si mezclas los dos paradigmas sin entenderlos, obtendrás errores “changed after checked” o vistas que no se actualizan.

Las nuevas características

Una vez que arregles la compilación, la v21 ofrece algunas mejoras increíbles en la experiencia de desarrollo (DX).

1. Signal Forms (Experimental pero estable)

Esta es la característica que hemos estado esperando. No más espagueti de valueChanges.pipe(...).

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

// Definir un modelo de formulario reactivo
const loginForm = form({
  email: field('', [Validators.required, Validators.email]),
  password: field('', [Validators.required])
});

// ¡Accede a los valores directamente como signals!
console.log(loginForm.value().email);

Por qué usarlo: Es seguro en cuanto a tipos por defecto y no requiere maestría en RxJS.

Estado: Experimental. Úsalo para nuevas características, pero tal vez no reescribas tu flujo de pago todavía.

2. Angular Aria (Developer Preview)

Una nueva biblioteca de primitivas “headless” para accesibilidad.

En lugar de pelear con aria-expanded y role="button", usas directivas que manejan la lógica de accesibilidad mientras tú manejas el CSS.

<!-- Maneja navegación por teclado, foco y roles ARIA automáticamente -->
<div ariaMenu>
  <button ariaMenuItem>Opción 1</button>
  <button ariaMenuItem>Opción 2</button>
</div>

3. Regex en plantillas

Pequeño pero poderoso. Finalmente, puedes usar literales de expresiones regulares en plantillas, perfecto para la lógica @if sin crear una función auxiliar.

@if (email() | match: /@company\.com$/) {
  <span class="badge">Empleado</span>
}

La lista de verificación de actualización

¿Listo para saltar? Sigue este orden para minimizar el dolor.

Copia de seguridad: Haz commit de todo. En serio.
Actualizar el CLI Global: Actualizar Angular generalmente implica dos partes: el CLI global y las dependencias locales del proyecto. Asegúrate de que tu CLI global esté actualizado primero (podrías necesitar sudo o privilegios de administrador).

# Opcional: Desinstalar la versión global antigua primero para evitar conflictos npm uninstall -g @angular/cli # Verificar la caché de npm npm cache verify # Instalar la última versión global del CLI npm install -g @angular/cli@latest
Actualizar proyecto local: Ahora actualiza las dependencias locales de tu proyecto:

ng update @angular/cli@21 @angular/core@21
Ejecutar los diagnósticos: Angular 21 incluye diagnósticos más inteligentes. Presta atención a las advertencias sobre ngClass (obsoleto a favor de [class.my-class]) y oportunidades de migración standalone.
Comprobar tus pruebas: Ejecuta ng test. Si explota, decide:
- Ruta A: Mantener Karma (añadir @angular/build:karma manualmente si se eliminó).
- Ruta B: Migrar a Vitest (recomendado).
Opcional: Ir zoneless: Si te sientes valiente, ejecuta la migración experimental:

ng generate @angular/core:zoneless-migration

Nota: Esto es tema de “Agentes IA”. Te recomendamos que leas nuestra Guía MCP para saber cómo dejar que la IA maneje esta refactorización compleja.

Resumen

Angular 21 es el lanzamiento de “borrón y cuenta nueva”. Se deshace del peso de la última década (Zone, Karma, Modules) para competir con marcos modernos como Svelte y Solid.

La actualización puede ser irregular debido a los cambios en las pruebas, pero el destino —un marco más rápido, más simple e impulsado por signals— vale absolutamente la pena.

¿Ya estás en 21? El siguiente paso está aquí: Angular 21 a 22: Breaking Changes y Cómo Solucionarlos. O consulta todas las rutas de migración en el Hub de Migraciones Angular.