Angular 19: qué novedades trae y qué necesitas saber de esta versión

Angular 19 ya está aquí, y viene cargado de novedades que hacen que el framework sea más rápido y fácil de usar. Esta versión representa un paso importante en la evolución del framework, centrándose especialmente en el rendimiento y la experiencia del desarrollador.

Durante los últimos dos años, el equipo de Angular se ha concentrado en mejorar aspectos fundamentales del framework, sobre todo en tres áreas principales: rendimiento en el lado del servidor, sistema de reactividad y experiencia de desarrollo.

Las mejoras más destacadas de la nueva versión incluyen una nueva forma de hidratación incremental que mejora significativamente el rendimiento, la estabilización de las API de señales que se presentaron en versiones anteriores, y nuevas herramientas que hacen que el desarrollo sea más ágil y productivo.

También encontramos novedades importantes en Angular Material y el CDK (Kit de desarrollo de componentes), como un nuevo selector de tiempo (¡por fin!) y mejoras significativas en el sistema de temas. Además, se han añadido características muy solicitadas por la comunidad, como la detección de imports no utilizados en componentes standalone y una nueva forma de declarar variables locales en las plantillas.

Y hablando de componentes standalone, al haberlos convertido en la opción predeterminada para nuevos proyectos desde la versión 18 anterior, más del 90% de los desarrolladores ya los están usando según la última encuesta, lo que refleja la madurez de esta característica y su amplia adopción por parte de la comunidad.

Todo esto viene acompañado de nuevas herramientas para mantener tu código actualizado con las últimas prácticas recomendadas, incluyendo las habituales migraciones automatizadas para adoptar las nuevas APIs de forma segura y gradual. Veamos en detalle cada una de estas mejoras...

Mejoras en el rendimiento

La velocidad y el rendimiento son aspectos críticos en el desarrollo web moderno, y Angular 19 trae importantes novedades en este campo. La más destacada es la hidratación incremental, que permite cargar y activar partes de tu aplicación de forma independiente.

Hidratación incremental

Imagina que tienes una página de comercio electrónico con un panel de filtros, una lista de productos y un carrito de compra:

Con la hidratación incremental, puedes hacer que cada sección se active solo cuando el usuario la necesite:

@Component({
  template: `
    <!-- El panel de filtros se hidrata cuando aparece en pantalla -->
    @defer (hydrate on viewport) {
      <app-filtros />
    }

    <!-- La lista se hidrata inmediatamente -->
    <app-lista-productos />

    <!-- El carrito se hidrata cuando el usuario interactúa -->
    @defer (hydrate on interaction) {
      <app-carrito />
    }
  `
})
export class TiendaComponent {}

Para activar esta función en tu aplicación, solo necesitas añadir:

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

// En tu configuración de bootstrap
provideClientHydration(withIncrementalHydration())

Reproducción de eventos

¿Qué pasa si un usuario hace clic en un botón antes de que se cargue el JavaScript asociado? Angular 19 incluye por defecto un sistema de reproducción de eventos que captura estas interacciones tempranas y las reproduce una vez que el código está disponible. Esta característica, probada por miles de millones de usuarios en el buscador de Google, ahora está disponible para todas las aplicaciones Angular 😲

Control del renderizado por rutas

También se ha añadido un nuevo sistema para controlar cómo se renderiza cada ruta de tu aplicación. Puedes decidir si una ruta se renderiza en el servidor, en el cliente o durante la compilación:

export const rutas: ServerRoute[] = [
  { 
    path: '/productos', 
    mode: RenderMode.Server // Renderizado en servidor
  },
  { 
    path: '/perfil', 
    mode: RenderMode.Client // Renderizado en cliente
  },
  { 
    path: '/blog/:id',
    mode: RenderMode.Prerender,
    async getPrerenderPaths() {
      const posts = await obtenerPostsIds();
      return posts.map(id => ({ id }));
    }
  }
];

Esta configuración te da un control preciso sobre el renderizado de tu aplicación, permitiéndote optimizar cada ruta según sus necesidades específicas. Además, incluye una forma elegante de resolver parámetros dinámicos durante la precompilación, lo que es especialmente útil para sitios con contenido estático como blogs o documentación.

El uso de renderMode ofrece diversas ventajas:

• Mejor rendimiento: se puede optimizar el tiempo de carga de la aplicación renderizando en el servidor las partes que requieren un procesamiento intensivo.
• SEO mejorado: prerrenderizar las rutas permite que los motores de búsqueda indexen el contenido de la aplicación de forma más efectiva.

Todas estas mejoras de rendimiento trabajan juntas para crear aplicaciones más rápidas y responsivas, sin sacrificar la experiencia de desarrollo que caracteriza a Angular. Y hablando de desarrollo...

Novedades en la reactividad

El sistema de reactividad en Angular sigue evolucionando y madurando. Esta versión trae dos nuevas APIs muy interesantes, además de estabilizar características que ya conocíamos.

Estado de la API de Señales en Angular v19

Antes de nada conviene conocer el estado actual de la API de señales en Angular, que ha estado en constante evolución durante las últimas versiones. Con la llegada de Angular v19, algunas partes de esta API se han estabilizado, mientras que otras aún permanecen en preview para futuras mejoras.

Estabilización de entradas, salidas y consultas de vista:

• Las APIs para inputs, outputs y view queries, introducidas en versiones anteriores, ahora se consideran estables en Angular v19. Lo veremos a continuación.

• Para facilitar la adopción de estas APIs, Angular v19 ofrece esquemas que transforman automáticamente las implementaciones existentes:

  • ng generate @angular/core:signal-input-migration
  • ng generate @angular/core:signal-queries-migration
  • ng generate @angular/core:output-migration

• Se puede ejecutar todas estas migraciones a la vez con el alias: ng generate @angular/core:signals

• Es importante tener en cuenta que los inputs de señal son de solo lectura, a diferencia de los inputs tradicionales. Si se está estableciendo valores de input, puede que sea necesario migrar partes de la aplicación manualmente.

APIs experimentales:

• effect: aunque ha habido cambios en el timing de effect en base al feedback de los desarrolladores, esta API permanece en developer preview para asegurar su correcto funcionamiento.
• linkedSignal: esta nueva primitiva, introducida en Angular v19, permite la creación de una señal grabable que rastrea un estado de nivel superior, simplificando casos de uso comunes en la interfaz de usuario.
• resource: esta API experimental integra señales con operaciones asíncronas. Un recurso se compone de una función de solicitud, un cargador asíncrono y una instancia de Resource que expone señales para comunicar el valor y el estado del recurso.
• Zoneless Angular: aunque ha mostrado resultados prometedores, zoneless aún está en fase experimental y se espera que se traslade a developer preview en el futuro.

En resumen, si bien algunas partes de la API de señales se han estabilizado en Angular v19, otras, como effect, linkedSignal, resource y zoneless, permanecen en preview o en fase experimental. Se recomienda estar atento a las actualizaciones de Angular para conocer el estado de estas APIs en el futuro.

Señales vinculadas

La nueva API linkedSignal resuelve un problema común: tener un estado mutable que depende de otro estado. Por ejemplo, cuando tienes una lista de opciones y necesitas mantener una selección actual:

@Component({
  template: `
    <select [ngModel]="seleccionActual()">
      @for (opcion of opciones(); track opcion) {
        <option [value]="opcion">{{ opcion }}</option>
      }
    </select>
  `
})
export class SelectorComponent {
  // Lista de opciones disponibles
  opciones = signal(['Madrid', 'Barcelona', 'Valencia']);
  
  // La selección actual se reinicia si cambian las opciones
  seleccionActual = linkedSignal(() => this.opciones()[0]);

  cambiarOpciones() {
    this.opciones.set(['Sevilla', 'Bilbao']);
    // seleccionActual se actualiza automáticamente a 'Sevilla'
  }
}

API de recursos

La nueva API experimental resource facilita la integración de operaciones asíncronas en el grafo de señales:

@Component({
  template: `
    @if (usuario.pending) {
      Cargando...
    } @else if (usuario.error) {
      Error: {{ usuario.error }}
    } @else {
      ¡Hola {{ usuario().nombre }}!
    }
  `
})
export class PerfilComponent {
  id = input<number>();
  
  usuario = resource({
    request: () => this.id(),
    loader: async (id) => {
      const response = await fetch(`/api/usuarios/${id}`);
      return response.json();
    }
  });
}

Esta API maneja automáticamente los estados de carga y error, y se integra perfectamente con el sistema de señales.

Estabilización de APIs existentes

Las APIs de señales para inputs, outputs y queries que se introdujeron en versiones anteriores ahora son estables. Puedes actualizar tu código automáticamente usando los nuevos schematics:

# Actualiza todos los inputs a la nueva sintaxis
ng generate @angular/core:signal-input-migration

# Actualiza las queries
ng generate @angular/core:signal-queries-migration

# Actualiza los outputs
ng generate @angular/core:output-migration

# O actualiza todo de una vez
ng generate @angular/core:signals

Y lo mejor es que ahora puedes hacer estas actualizaciones directamente desde tu editor de código, gracias a la nueva integración con el language service. El sistema te sugerirá las mejoras disponibles mientras escribes código.

Estas mejoras en el sistema de reactividad hacen que el código sea más predecible y fácil de mantener, especialmente cuando trabajas con datos asíncronos. Y para hacer el desarrollo aún más agradable...

Experiencia del desarrollador

La versión 19 de Angular trae importantes mejoras en las herramientas de desarrollo que harán tu día a día más productivo.

Hot Module Replacement

¡Por fin! Angular ahora incluye HMR por defecto para los estilos y de forma experimental para las plantillas.

Esto significa que los cambios en tu código se reflejan instantáneamente en el navegador sin perder el estado de la aplicación:

// Antes: cambiar estilos requería recargar la página
@Component({
  styles: [`
    .destacado { 
      color: blue; 
    }
  `]
})

// Ahora: los cambios se aplican al instante
@Component({
  styles: [`
    .destacado { 
      color: red;
      font-weight: bold; 
    }
  `]
})

Para activar HMR en plantillas, usa:

NG_HMR_TEMPLATES=1 ng serve

Standalone por defecto

Los componentes standalone son ahora el estándar en Angular 19 sin necesidad de indicarlo explícitamente como hasta ahora (aunque puedes seguir haciéndolo por claridad si quieres). El flag standalone se establece automáticamente a true y se elimina de los metadatos para mantener el código más limpio:

// Antes
@Component({
  standalone: true,
  selector: 'app-tarjeta',
  template: '...'
})

// Ahora
@Component({
  selector: 'app-tarjeta',
  template: '...'
})

Si quieres asegurarte de que todo tu código sigue este estándar, puedes activar el modo estricto en la configuración:

{
  "angularCompilerOptions": {
    "strictStandalone": true
  }
}

Novedades en Angular Material y CDK: Más allá de Material 3

Angular Material es una biblioteca de componentes de interfaz de usuario que implementa las directrices de Material Design de Google. Por su parte, el Component Dev Kit o CDK es un conjunto de herramientas y utilidades que te ayudan a crear componentes personalizados.

Angular Material y el CDK siguen evolucionando en esta versión para ofrecer una experiencia de desarrollo más completa y satisfactoria. Tras la llegada de Material 3 y su potente sistema de temas basado en mixins , ahora la versión 19 de Angular presenta varias mejoras adicionales en la API de temas, así como nuevas funcionalidades en CDK que seguro agradecerás.

Una de las novedades más esperadas en Angular Material es la inclusión de un nuevo componente selector de horas. Con más de 1.300 me gusta en GitHub, esta petición respondía a una necesidad real de los desarrolladores. El nuevo componente se alinea con los estándares de accesibilidad y ofrece una interfaz intuitiva para seleccionar la hora:

En cuanto a Angular CDK, se ha añadido soporte para el drag & drop bidimensional, otra funcionalidad muy solicitada por la comunidad. Con cdkDropListOrientation="mixed", podrás crear interfaces donde los elementos se puedan arrastrar tanto vertical como horizontalmente, abriendo un abanico de posibilidades para el diseño de interfaces interactivas:

El sistema de temas de Material 3 también se ha visto mejorado. La nueva API de temas te permite personalizar tus componentes de forma más eficiente. En lugar de tener que usar múltiples mixins para cada componente, ahora puedes aplicar un tema personalizado a toda tu aplicación con un solo mixin, mat.theme.

Además, se ha introducido una nueva API para sobrescribir estilos de componentes individuales utilizando mat.sidenav-overrides, lo que te permite modificar aspectos específicos de un componente sin afectar al resto del tema.

Otras mejoras destacables

Angular v19 no solo se centra en las grandes novedades, sino que también introduce una serie de mejoras "de calidad de vida" para hacer más agradable la experiencia de desarrollo. Estas mejoras se enfocan en aspectos como la seguridad, la organización del código y la expresividad de las plantillas.

En materia de seguridad, Angular 19 introduce una característica en developer preview para la generación automática de una política de seguridad de contenido estricta (CSP) basada en hashes. Esta política se genera a partir de los scripts presentes en el archivo index.html. Gracias al uso de hashes, el navegador añade el hash de cada script en línea al CSP. Esto previene la ejecución de código malicioso, ya que para que un script se ejecute, su hash debe estar presente en el CSP. Para activar esta funcionalidad, debes configurar la propiedad autoCSP a true dentro de la sección security del builder de tu aplicación en el archivo angular.json.

La declaración de variables locales en las plantillas era una funcionalidad muy demandada por la comunidad, acumulando más de 400 me gustas en GitHub. Con la llegada en la versión anterior de la nueva sintaxis de bloque para el control de flujo así como ahora las vistas diferibles, se ha introducido una solución elegante para declarar variables locales en las plantillas. Esta característica, que se encontraba en developer preview en Angular v18.1, se ha estabilizado en v19. La sintaxis se integra perfectamente con las referencias de plantilla y el pipe async, permitiendo un código más legible y organizado.

Finalmente, Angular 19 te ayuda a mantener un código limpio y eficiente gracias al renovado Language Service (el sistema nativo que tiene Angular para que los diferentes editores puedan sugerirte cambios y mejoras en el código), Ahora detecta imports no utilizados en componentes standalone y te permite eliminarlos con un solo clic. El CLI mostrará una advertencia para cada importación no utilizada y el Language Service las resaltará en el editor. Si deseas desactivar esta comprobación, puedes configurar la opción unusedStandaloneImports a "suppress" dentro de la sección extendedDiagnostics en el archivo angular.json.

En resumen

Aparte de introducir nuevas funcionalidades, la versión 19 de Angular se vuelve a centrar en mejorar la experiencia global del desarrollador.

Con mejoras en el renderizado del lado del servidor, la introducción de nuevas primitivas reactivas y una integración más profunda entre los schematics y el Language Service, Angular v19 impulsa la productividad y la eficiencia en el desarrollo. La estabilización de APIs clave, como los inputs, outputs y queries basados en señales, consolida el camino hacia un Angular más moderno y reactivo.

Angular Material y CDK ofrecen nuevas herramientas para crear interfaces de usuario más atractivas e interactivas, ampliando las posibilidades de diseño y personalización.

En resumen, Angular 19 sigue allanando el camino hacia la creación de aplicaciones web más intuitiva, más eficiente y, sobre todo, más satisfactoria para los desarrolladores, tratando de ganarse cada vez más popularidad entre los individuales (porque Angular ya es el framework de Font-End más popular en las empresas).

Si te interesa, aquí puedes ver el vídeo del evento de presentación de Angular 19 (en inglés).

Preguntas frecuentes sobre Angular 19

1. ¿Cuáles son las principales novedades de Angular 19?

Angular 19 introduce mejoras significativas en el rendimiento con la hidratación incremental, que agiliza la carga de aplicaciones renderizadas en el servidor. En cuanto a la reactividad, se estabilizan las APIs de inputs, outputs y queries basadas en señales, y se añaden nuevas primitivas como linkedSignal y resource para gestionar la asincronía. La experiencia de desarrollo se optimiza con la integración de schematics en el Language Service, facilitando la migración a nuevas APIs. Angular Material se renueva con un componente selector de tiempo, soporte para arrastrar y soltar en dos direcciones y mejoras en la API de temas. La seguridad se refuerza con la generación automática de políticas CSP. Además, se incluyen reportes de importaciones no utilizadas, declaración de variables locales en plantillas y la opción de pasar variables de entorno durante la compilación.

2. ¿Qué es la hidratación incremental y cómo mejora el rendimiento?

La hidratación incremental te permite anotar partes de tu plantilla, usando la sintaxis familiar @defer, instruyendo a Angular para que las cargue e hidrate bajo disparadores específicos, de forma perezosa. Esto significa que Angular no descargará ni hidratará un componente hasta que sea necesario, por ejemplo, cuando entre en la vista del usuario. Esto reduce la cantidad de JavaScript que se envía al usuario inicialmente, lo que mejora significativamente el rendimiento, especialmente en aplicaciones grandes.

3. ¿Cómo se habilita la reproducción de eventos por defecto y cuál es su beneficio?

La reproducción de eventos se habilita de forma predeterminada en Angular v19 para todas las nuevas aplicaciones que utilizan renderizado del lado del servidor (SSR). Esta función captura los eventos del usuario durante la carga inicial de la página y los reproduce cuando el código responsable de manejarlos está disponible. Esto soluciona el problema de la brecha entre el evento del usuario y la descarga/ejecución del código, proporcionando una experiencia de usuario más fluida y receptiva.

4. ¿Cómo mejora la edición/actualización instantánea con el reemplazo de módulos en caliente (HMR) el flujo de trabajo de desarrollo?

Angular v19 admite HMR para estilos de forma predeterminada y habilita el soporte experimental para HMR de plantillas detrás de un flag. Con HMR, los cambios en estilos o plantillas se compilan y envían al navegador, actualizando la aplicación sin necesidad de recargar la página ni perder el estado. Esto acelera el ciclo de desarrollo y mantiene un flujo de trabajo ininterrumpido.

5. ¿Qué significa que "standalone" ahora es el valor predeterminado y cómo simplifica el desarrollo?

En Angular v19, standalone: true es el valor por defecto para los componentes, directivas y pipes. Esto significa que ya no es necesario declarar explícitamente los componentes como standalone, lo que simplifica los metadatos de cada componente y reduce la "verbosidad" del código. Además, se proporciona un esquema que actualizará automáticamente los proyectos existentes para eliminar la propiedad standalone donde no sea necesaria.

6. ¿Cuáles son las novedades en las APIs de reactividad con la introducción de linkedSignal y resource?

Angular v19 introduce dos nuevas APIs experimentales: linkedSignal y resource. linkedSignal crea una señal grabable que se actualiza automáticamente en función de los cambios en otra señal, simplificando la gestión de estados dependientes. resource facilita la integración de operaciones asíncronas en el gráfico de señales, permitiendo que los datos asíncronos participen en el sistema de reactividad de Angular.

7. ¿Qué mejoras se han realizado en las APIs de input, output y consultas de vista?

Las APIs de input, output y consultas de vista, introducidas en versiones anteriores, ahora se consideran estables en Angular 19. Se proporcionan esquemas para ayudar a los desarrolladores a migrar de las APIs antiguas a las nuevas. Además, la integración con el servicio de lenguaje permite realizar estas actualizaciones directamente desde el editor de código.

8. ¿Qué nuevas funciones ofrece el componente time picker en Angular Material?

Angular Material v19 finalmente introduce un componente de selección de horas respondiendo a una popular solicitud de la comunidad. Este nuevo componente proporciona una forma estandarizada y accesible para que los usuarios seleccionen una hora además de una fecha.

9. ¿Cómo mejora la API de temas en Angular Material la personalización de componentes?

La API de temas de Angular Material se ha mejorado para simplificar la creación de temas personalizados. Ahora es posible declarar un tema personalizado utilizando un solo mixin, mat.theme, en lugar de tener que usar mixins específicos de cada componente. Además, se introduce una nueva API de overrides para personalizar fácilmente los estilos de componentes individuales.