Novedades en Angular 19, ¿Qué hay de nuevo?

Angular sigue evolucionando y la versión 19 no es la excepción. Con un enfoque en la experiencia del desarrollador (Developer Experience), rendimiento mejorado y nuevas herramientas, Angular 19 ofrece características que simplificarán tus proyectos y los harán más eficientes. En este artículo, exploraremos las mejoras en reactividad con Signals, optimización del renderizado y mucho más. Además, este artículo es la onceava iteración desde la versión 8, uno de los primeros artículos en este blog…

1.Standalone components como estándar.

Los Standalone Components han sido una adición revolucionaria desde su introducción en Angular 14, y ahora en Angular 19 se convierten en el comportamiento predeterminado. Esto significa que ya no necesitas declarar standalone: true en cada componente.

Antes de Angular19:

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'standalone-component',
  templateUrl: './standalone-component.html',
})
export class StandaloneComponent { }

Ahora:

@Component({
  imports: [CommonModule],
  selector: 'standalone-component',
  templateUrl: './standalone-component.html',
})
export class StandaloneComponent { }

Esto elimina la necesidad de módulos (NGModules) en la mayoría de los casos, simplificando la estructura de las aplicaciones y fomentando un desarrollo modular. Si aún necesitas trabajar con NgModules, puedes declararlo explícitamente standalone: false.

2. Hidratación parcial e incremental para un renderizado más rápido

Angular 19 introduce hidratación parcial e incremental, lo que transforma el rendimiento de las aplicaciones renderizadas en el servidor (SSR):

• Hidratación parcial:

  Prioriza la carga de componentes críticos, reduciendo el tiempo de interacción inicial.

• Hidratación incremental:

  Difiere la carga de funcionalidades según interacciones del usuario (clics o hovers), optimizando el uso de recursos.

Estas técnicas permiten aplicaciones más rápidas e interactivas desde el primer momento, mejorando la experiencia del usuario.

3. Signals mejorados: Simplificando la reactividad

La integración de Signals en Angular continúa mejorando, ahora con soporte más profundo y nuevas herramientas como LinkedSignal:

¿Qué son los Signals?

Son una API diseñada para manejar estados de forma reactiva y predecible, reduciendo la dependencia de Zone.js. Esto no solo simplifica la depuración, sino que también mejora el rendimiento y reduce el tamaño de los paquetes.

Ejemplo de uso con Signals:Introducción de linkedSignal:

linkedSignal Es una nueva herramienta que permite crear señales dependientes que se actualizan automáticamente según una señal fuente.

import { signal, linkedSignal } from '@angular/core';

const fuente = signal(10);
const doble = linkedSignal(fuente, valor => valor * 2);

console.log(doble()); // 20
fuente.set(15);
console.log(doble()); // 30

4. Mejoras en el API de componentes

Angular 19 introduce ngAfterSignalUpdate un nuevo hook para reaccionar tras la actualización de un Signal, facilitando la interacción con estados complejos.

import { Component, Signal, signal, AfterSignalUpdate } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  template: 
    <h3>Signal Lifecycle</h3>
    <button (click)="updateSignal()">Update</button>
  ,
})
export class SignalLifecycleComponent implements AfterSignalUpdate {
  mySignal = signal(0);
  updateSignal() {
    this.mySignal.set(this.mySignal() + 1);
  }
  ngAfterSignalUpdate() {
    console.log('Signal updated to:', this.mySignal());
  }
}

El nuevo hook ngAfterSignalUpdate permite a los desarrolladores reaccionar después de que se haya actualizado el signal, lo que puede ser esencial para gestionar cambios en la interfaz de usuario e interacciones de estado complejas.

5. Tiempos de construcción más rápidos

Gracias a optimizaciones en Angular CLI, las construcciones son más rápidas tanto en entornos de desarrollo como de producción. La incorporación de caché acelera los procesos iterativos.

Ejemplo: Construcción con caché

ng build - optimization=true - build-cache

6.Inyección de dependencias

Ahora Angular infiere automáticamente los tipos en la Inyección de Dependencias (DI), reduciendo el código repetitivo y aumentando la seguridad de tipos.

Ejemplo: Inferencia de tipos en DI

// Antes
constructor(private http: HttpClient) {}

// Ahora en Angular 19
constructor(private readonly httpClient) {}

7. APIs resource y rxResource: Datos asíncronos simplificados

Manejar datos asíncronos ahora es más fácil con las nuevas APIs experimentales resource y rxResource, diseñadas para Promises y Observables respectivamente.

Propiedades de⁣ resource: ⁣

• Status:
  Estado del recurso (cargando, éxito o error).

• Value:
  Datos recuperados tras la carga.

• Error:
  Gestión de errores.

Ejemplo con rxResource

Estas herramientas unifican la gestión de datos asíncronos, haciendo que los flujos sean más intuitivos.

import { rxResource } from '@angular/core';

const datos = rxResource(async () => {
  const respuesta = await fetch('/api/datos');
  return respuesta.json();
});

datos.value.subscribe(data => console.log(data));

8. Mejoras al routing

Angular 19 introduce una integración más profunda de Signals con el Router, permitiendo flujos de navegación más reactivos y simplificados. Esto facilita el manejo de parámetros de ruta y de consulta de forma reactiva.

Ejemplo: Uso de Signals con el Router

import { Component, inject, OnInit, Signal } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-route-signal',
  template: `
    <h2>Demostración de Rutas</h2>
    <p>ID de la ruta: {{ signalId() }}</p>
  `,
})
export class RouteDemoComponent implements OnInit {
  private route = inject(ActivatedRoute);
  signalId: Signal<string> = signal('');

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.signalId.set(params.get('id') ?? '');
    });
  }
}

Bonus
Angular Material incluye nuevas mejoras en los estilos, características de accesibilidad y la interacción de los componentes. Por ejemplo, componentes como mat-menu y mat-select ahora son más intuitivos y fáciles de usar.
Ejemplo: Uso mejorado de mat-menu

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <button mat-menu-item>Item 3</button>
</mat-menu>

Conclusión.

Angular 19 es un paso significativo en la evolución del framework. Desde el uso predeterminado de Standalone Components, pasando por las mejoras en reactividad con Signals, hasta la optimización en SSR, esta versión ofrece herramientas para construir aplicaciones más rápidas, reactivas y mantenibles.

¿Te animas para actualizar?

Guía para actualizar en :https://angular.dev/update-guide/?v=18.0-19.0&l=1

ng update @angular/core @angular/cli

Comparte tu experiencia con estas nuevas funcionalidades y sigue explorando el futuro del desarrollo con Angular. 🚀

¡Gracias a @damiansire por dar el visto bueno a este post!