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 conSignals, 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 declararstandalone: true en cada componente.

Antes de Angular19:

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

Ahora:

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

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ícitamentestandalone: 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 deSignals en Angular continúa mejorando, ahora con soporte más profundo y nuevas herramientas comoLinkedSignal:

¿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';constfuente=signal(10);constdoble=linkedSignal(fuente,valor=>valor*2);console.log(doble());// 20fuente.set(15);console.log(doble());// 30

4. Mejoras en el API de componentes

Angular 19 introducengAfterSignalUpdate 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>SignalLifecycle</h3><button(click)="updateSignal()">Update</button>,})exportclassSignalLifecycleComponentimplementsAfterSignalUpdate{mySignal=signal(0);updateSignal(){this.mySignal.set(this.mySignal()+1);}ngAfterSignalUpdate(){console.log('Signal updated to:',this.mySignal());}}

El nuevo hookngAfterSignalUpdate 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é

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

// Antesconstructor(privatehttp:HttpClient){}// Ahora en Angular 19constructor(privatereadonlyhttpClient){}

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

Manejar datos asíncronos ahora es más fácil con las nuevasAPIs experimentalesresource yrxResource, 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 conrxResource

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>  `,})exportclassRouteDemoComponentimplementsOnInit{privateroute=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 comomat-menu ymat-select ahora son más intuitivos y fáciles de usar.
Ejemplo: Uso mejorado demat-menu

<buttonmat-button[matMenuTriggerFor]="menu">Menu</button><mat-menu#menu="matMenu"><buttonmat-menu-item>Item 1</button><buttonmat-menu-item>Item 2</button><buttonmat-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!