Esta es una guía práctica enfocada en lo que realmente importa al actualizar una aplicación del mundo real: qué se rompe, qué facilita tu trabajo y cómo deberías adaptar tu estilo de desarrollo.

1. La Historia Completa Detrás de la Eliminación de Karma: Más Allá de una Compilación Rota

El problema inmediato al actualizar es queng test fallará. La razón es un cambio fundamental en las herramientas de compilación de Angular.

Ya que un framework moderno requiere test runners modernos.

¿Por qué Angular eliminó Karma?

Con Angular 20, el paquete de compilación predeterminado cambia de@angular-devkit/build-angular al nuevo@angular/build. Este nuevo paquete ya no incluye el plugin de Karma utilizado por las configuraciones de prueba heredadas. El ecosistema web ha avanzado hacia test runners más rápidos como Vitest y Jest, que utilizan herramientas modernas como Vite y esbuild. Karma se había convertido en un cuello de botella.

Cómo es el nuevo panorama (Vitest/Jest)

El test runner experimental de Angular, ahora impulsado por Vitest, es el futuro. Migrar significa que tus pruebas unitarias se ejecutarán en un entorno rápido y moderno basado en Node.js.

La "solución temporal" explicada

Este comando obliga a la CLI a volver al compilador antiguo que todavía soporta Karma. Es un puente de compatibilidad, pero el mensaje es claro: deberías empezar a planificar tu migración a Jest or Vitest pronto.

npminstall @angular-devkit/build-angular--save-dev

2. Prerrequisitos

Antes de comenzar el proceso de actualización, asegúrate de cumplir con los siguientes requisitos:

• Node.js: Versión20.11.1 o posterior.
• TypeScript: Versión5.8 o posterior.
• Copia de seguridad del proyecto: Confirma todos los cambios actuales en Git.

3. Cómo Actualizar: Comando CLI y Comparación

Comando de Actualización

Primero, asegúrate de que estás ejecutando Node.js v20.11.1 o posterior.

ng update @angular/cli @angular/core

Si usas Angular Material, inclúyelo en el comando de actualización:

ng update @angular/cli @angular/core @angular/material

Intervención Manual Requerida

Esto no era necesario en versiones anteriores, pero ahora esobligatorio if you want to keep using Karma. El comando reinstala el compilador antiguo con soporte para Karma.

npminstall @angular-devkit/build-angular--save-dev

Comparación con Actualizaciones Anteriores

• En v19:ng update simplemente funcionaba.
• En v20: Debes reinstalar manualmente el compilador antiguo para Karma.

4. Flujo de Control(Control Flow): Más que Syntaxis Decorativo

La nueva sintaxis@for reemplaza a*ngFor y es una mejora importante.

Sintaxis Antigua:

<div*ngFor="let item of items; trackBy: trackItemById">  {{ item.name }}</div>

Sintaxis Nueva:

@for (item of items; track item.id) {<div>{{ item.name }}</div>} @empty {<div>No hay elementos para mostrar.</div>}

Mejoras clave:

• track ahora es obligatorio, lo que fomenta las mejores prácticas de rendimiento.
• @empty mejora la experiencia del desarrollador (DX) al eliminar la necesidad de un bloque@if separado para manejar listas vacías.

Migración Automatizada y Rendimiento

Usa la CLI para refactorizar automáticamente las plantillas a la nueva sintaxis de flujo de control, que ofrece mejoras de rendimiento y un código más mantenible.

ng generate @angular/core:control-flow

Mejores Prácticas Generales y Migraciones Adicionales

Considera migrar a otras características modernas de Angular junto con la actualización del flujo de control para una aplicación completamente optimizada. Esto puede incluir componentes standalone, signals como inputs y carga diferida (lazy loading) para rutas.

ng generate @angular/core:standaloneng generate @angular/core:injectng generate @angular/core:route-lazy-loadingng generate @angular/core:signal-input-migrationng generate @angular/core:signal-queries-migrationng generate @angular/core:output-migration

5. Standalone por Defecto: Un Cambio Arquitectónico Fundamental

Al listar explícitamente las dependencias usando el arrayimports a nivel de componente, cada componente se vuelve autocontenido. Esto clarifica tu arquitectura y mejora significativamente el tree-shaking, resultando en paquetes de aplicación más pequeños.

6. Adiós Zone.js (Zoneless): Escapando de la "Magia" de la Detección de Cambios

En un mundo sin zone.js, la interfaz de usuario solo se actualiza cuando se lo indicas explícitamente. Los Signals son la herramienta principal para esto. Cuando llamas amySignal.set(), le estás diciendo directamente a Angular que actualice solo las partes del DOM que usan ese signal. Es un enfoque quirúrgico, predecible y de alto rendimiento.

7. Nueva Convención de Nombres: Por Qué Parece Complicado

Angular 20 introduce una nueva convención de nombres oficial que elimina los sufijos de tipo tradicionales.

Nomenclatura Antigua:

user-profile.component.tsauth.service.tshighlight.directive.ts

Nomenclatura Nueva:

user-profile.tsauth-store.tshighlight.ts

El nuevo enfoque está en laintención del archivo en lugar de su tipo:

• user-api.ts → Maneja peticiones HTTP
• auth-store.ts → Gestiona el estado reactivo
• movie-card.ts,movie-details.ts → Componentes de UI

Reglas Clave de Nomenclatura:

• Usa guiones para nombres de archivo de varias palabras (ej.user-profile.ts).
• Haz que el nombre de la clase coincida con el nombre del archivo.
• Mantén el sufijo.spec.ts para los archivos de prueba.
• Evita nombres genéricos comoutils.ts.
• Ubica los archivos relacionados en la misma carpeta (co-locate) dentro de una estructura de carpetas basada en funcionalidades.

Ejemplo de Estructura de Carpetas Basada en Funcionalidades:

src/├── core/│   └── auth/│       ├── auth-store.ts│       ├── login.ts│       └── register.ts└── features/    └── users/        ├── user-profile.ts        ├── user-api.ts        └── user-settings.ts

Beneficios:

• Diffs en Git más limpias al refactorizar.
• Promueve un código orientado a la intención.
• Facilita la incorporación de nuevos desarrolladores.

8. Detalle Importante:browserslist y Soporte de Navegadores

Angular 20 ya no soporta oficialmente Opera. Si tienes Opera en tu archivo.browserslistrc, puede que necesites eliminarlo. Otros navegadores no convencionales también pueden perder soporte, lo que podría provocar advertencias o problemas de compilación.