Migrando Angular 20 a 21: Guía.

Source: Dev.to

Una guía sin rodeos para actualizar de Angular 20 a 21. Cubre la eliminación de Karma, el nuevo modo Zoneless por defecto, HttpClient automático y cómo arreglar tus compilaciones rotas.

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 mejora la experiencia del desarrollador: zone.js es opcional, Karma está muerto y RxJS parece ser reemplazado lentamente. No es solo una actualización; se siente como todo un ecosistema nuevo.

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.

1. El Evento de Extinción de Karma (Vitest es el predeterminado)

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. Convierte 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

• Las 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 polyfills.ts seguirá importando Zone.

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). Mezclar los dos paradigmas sin entenderlos puede producir errores “changed after checked” o vistas que no se actualizan.

Los nuevos juguetes: Características que realmente usarás

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

1. Signal Forms (Experimental pero estable)

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

// 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)

  Opción 1
  Opción 2

Una biblioteca de primitivas “headless” para accesibilidad que elimina la necesidad de gestionar manualmente atributos como aria-expanded o role="button".

3. Regex en plantillas

@if (email() | match: /@company\.com$/) {
  Empleado
}

Permite usar literales de expresiones regulares directamente en plantillas, útil para lógica condicional sin funciones auxiliares.

La lista de verificación de actualización

1. Copia de seguridad

Haz commit de todo. En serio.

2. Actualizar el CLI global

# 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

3. Actualizar proyecto local

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

4. Ejecutar los diagnósticos

Angular 21 incluye diagnósticos más inteligentes. Presta atención a las advertencias sobre ngClass (obsoleto suavemente a favor de [class.my‑class]) y oportunidades de migración a standalone.

5. 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).

6. Opcional: Ir Zoneless

Si te sientes valiente, ejecuta la migración experimental:

ng generate @angular/core:zoneless-migration

Nota
Esto es territorio “Agéntico”. Mira 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 framework más rápido, más simple e impulsado por signals— vale absolutamente la pena.