Actualizando a Angular 20
#angular#frontend#angular20#webdev
Antonio Cardenas

Antonio Cardenas @antoniocardenas

About: Antonio Cárdenas—known online as yeoudev—is a developer and researcher working at the intersection of human augmentation, digital pheromones, and computational neuroscience.

Location:
Roatan, Bay Island , Honduras
Joined:
Jun 3, 2019

Actualizando a Angular 20

Publish Date: Jun 28
4 0

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 que ng 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.

npm install @angular-devkit/build-angular --save-dev
Enter fullscreen mode Exit fullscreen mode

2. Prerrequisitos

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

  • Node.js: Versión 20.11.1 o posterior.
  • TypeScript: Versión 5.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
Enter fullscreen mode Exit fullscreen mode

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

ng update @angular/cli @angular/core @angular/material
Enter fullscreen mode Exit fullscreen mode

Intervención Manual Requerida

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

npm install @angular-devkit/build-angular --save-dev
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Sintaxis Nueva:

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

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
Enter fullscreen mode Exit fullscreen mode

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:standalone
ng generate @angular/core:inject
ng generate @angular/core:route-lazy-loading
ng generate @angular/core:signal-input-migration
ng generate @angular/core:signal-queries-migration
ng generate @angular/core:output-migration
Enter fullscreen mode Exit fullscreen mode

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

Al listar explícitamente las dependencias usando el array imports 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 a mySignal.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.ts
auth.service.ts
highlight.directive.ts
Enter fullscreen mode Exit fullscreen mode

Nomenclatura Nueva:

user-profile.ts
auth-store.ts
highlight.ts
Enter fullscreen mode Exit fullscreen mode

El nuevo enfoque está en la intenció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 como utils.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
Enter fullscreen mode Exit fullscreen mode

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.

Comments 0 total

    Add comment