Migrando Angular 20 a 21: Guía.

Posted on by — No Comments ↓

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 trata de eliminar la vieja guardia. El “Modo Angular” ha cambiado fundamentalmente: zone.js es opcional, Karma está muerto y RxJS se retira lentamente a los bordes.

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

🚨 Los críticos 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 el esquemático 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.

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

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 listaa deverificación de actualización

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

  1. Copia de seguridad: Haz commit de todo. En serio.

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

  3. Actualizar proyecto local:
    Ahora actualiza las dependencias locales de tu proyecto: 

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

Note
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 marco más rápido, más simple e impulsado por signals— vale absolutamente la pena.

Leave a Reply