Angular 20 acaba de salir. El framework ha experimentado una transformación significativa en los últimos años, con innovaciones que no solo buscan modernizarlo, sino también mejorar drásticamente la experiencia del desarrollador y el rendimiento de las aplicaciones. Te lo contamos hace unos meses en este artículo: "El futuro de Angular en 2025: ¿Qué le espera a los desarrolladores?".
Ahora, Angular v20 no se presenta como una versión con cambios drásticos que rompen con lo anterior, pero sí como una edición crucial centrada en pulir y estabilizar muchas de estas características que hasta ahora estaban en progreso.
Si eres un desarrollador interesado en aprender o retomar Angular, este es un excelente momento para empezar. Las mejoras de v20, desde la estabilización de APIs clave (como Signals), hasta herramientas de depuración más potentes, están diseñadas para reducir puntos de fricción y hacer que el desarrollo sea más intuitivo y eficiente. Las características que antes estaban en "Developer Preview" o "Experimental" han madurado y se han promovido a estados más estables o pre-estables, lo que significa que puedes empezar a utilizarlas con mayor confianza. Y es por esto que también nosotros las añadiremos a nuestra formación de Angular.
En este artículo, exploraremos las novedades más destacadas de Angular v20 y cómo impactan directamente en tu día a día como desarrollador. Veremos cómo estas mejoras hacen que Angular sea más accesible y productivo que nunca, consolidándolo como un framework moderno y potente para tus proyectos web.
Signals: Reactividad Moderna (¡Estable!)
Uno de los pilares de la modernización de Angular en los últimos años ha sido la introducción del modelo de reactividad basado en Signals. ¿Qué significa esto? Básicamente, las Señales son la aproximación moderna de Angular a la reactividad y sustituyen a RxJS.
Piensa en una Signal como un envoltorio alrededor de un valor que tiene la capacidad de notificar a quienes lo "escuchan" cada vez que el valor cambia.
La principal ventaja de este enfoque es que simplifica drásticamente la gestión del estado en tus aplicaciones. Al adoptar Signals, reduces la cantidad de código imperativo que necesitas escribir para reaccionar a los cambios de datos, haciendo que la gestión del estado sea mucho menos complicada. Como dice el equipo de Angular, el enfoque basado en Signals "quita la palabra Gestión de la gestión del estado". En la práctica significa menos tiempo de desarrollo, menos errores y una aplicación más fácil de mantener.
Aunque las Señales se introdujeron en versión preliminar para desarrolladores (Developer Preview) en Angular 16, y se han ido adoptando ampliamente dentro y fuera de Google, es ahora en Angular 20 donde la mayor parte de sus APIs fundamentales alcanzan el estado "estable". Y es este el motivo por el que no lo habíamos metido hasta ahora en nuestro curso sobre Angular.
Esto es una noticia fantástica si estás empezando, ya que puedes construir con confianza utilizando herramientas probadas y consolidadas, usando el estilo más moderno y recomendado.
Las APIs de Signals que ahora puedes utilizar de forma estable y recomendada en Angular 20 incluyen:
signal: para crear valores reactivos básicos.computed: para crear valores derivados que se actualizan automáticamente cuando sus dependencias cambian.input: para definir entradas reactivas en componentes y directivas.view queries (viewChild, viewChildren): para consultas reactivas a elementos del DOM o componentes hijos.effect: para ejecutar efectos secundarios en respuesta a cambios de Signals.linkedSignal: una señal "escribible" dependiente de otro estado.toSignal: para convertir Observables existentes en Signals.
La estabilización de estas APIs clave significa que el modelo de señales está maduro y listo para ser el pilar de la reactividad en tus proyectos. Además de simplificar tu código, el modelo de reactividad de grano fino de Signals (fine-grain reactivity) abre la puerta a beneficios significativos en el rendimiento de tus aplicaciones. Empresas como YouTube ya han visto mejoras importantes en la latencia utilizando Signals.
Aprender Angular hoy, con las APIs de Signals estables, te posiciona para construir aplicaciones modernas y eficientes, aprovechando las últimas y más robustas herramientas del framework.
No solo eso: el grupo de trabajo TC39 de ECMAScript, encargado de estandarizar el lenguaje, está proponiendo incorporar las Señales directamente al lenguaje, basando la implementación en la que tiene Angular. Lo que aprendas para Angular seguramente te valdrá para usar en cualquier desarrollo en el futuro.
Datos asíncronos con Signals: Resource y HttpResource (Experimentales)
Construir aplicaciones web modernas suele implicar que interaccionemos con fuentes de datos externas: APIs REST para obtener información, WebSockets para recibir actualizaciones en tiempo real, etc.
Manejar estos datos asíncronos de forma eficiente y reactiva es un desafío habitual en el desarrollo de aplicaciones Front-End. En este contexto, Angular v20 introduce (¡OJO! todavía como APIs experimentales) resource y httpResource, que extienden el modelo de reactividad de Signals que vimos en el apartado anterior al ámbito de la carga de datos.
Piensa en un resource como un contenedor para datos que se obtienen de forma asíncrona. Su función principal es iniciar una acción asíncrona (como una petición HTTP o la escucha de un WebSocket) cuando una Señal de la que depende cambia, y exponer el resultado de esa acción también como un Signal. Esto permite que tu aplicación reaccione automáticamente cuando cambian los parámetros que determinan qué datos se deben cargar, manteniendo la interfaz de usuario sincronizada de forma reactiva.
El resource API se desarrolló inicialmente en v19 y ha incorporado feedback en v20, ganando madurez pero siguiendo como experimental. Si lo empiezas a usar, cuidado, podría cambiar sustancialmente en las próximas versiones.
Por ejemplo, podrías tener un Signal para el ID del usuario actual, y usar un resource que se active cada vez que ese ID cambie para cargar los datos correspondientes a un nuevo usuario:
const userId: Signal<string> = getUserId();
const userResource = resource({
params: () => ({id: userId()}),
loader: ({request, abortSignal}): Promise<User> => {
// fetch cancela las peticiones HTTP pendientess cuando el `AbortSignal`
// que se le pasa indique que se ha cancelado la petición.
return fetch(`users/${request.id}`, {signal: abortSignal});
},
});
También soporta casos más complejos, como la escucha de streams de datos desde WebSockets, actualizando una Señal a medida que llegan nuevos fragmentos (¿alguien dijo respuestas de LLMs?, pues valdría para algo así...).
Para simplificar todavía más si cabe el caso más habitual (las peticiones HTTP), Angular 20 también nos trae el httpResource (experimental). Este es una variación especializada de resource diseñada específicamente para interactuar con endpoints HTTP. Su sintaxis es más concisa, permitiéndote "incrustar" los parámetros reactivos (Signals) directamente en la URL o configuración de la petición:
@Component({
template: `{{ userResource.value() | json }}`
})
class UserProfile {
userId = signal(1);
userResource = httpResource<User>(() =>
`https://example.com/v1/users/${this.userId()}`
});
}
httpResource no solo expone el valor resultante como un Signal, sino que también proporciona otras propiedades útiles, como una Señal isLoading para saber si la petición está en ejecución todavía, o acceso a las cabeceras (headers) de la respuesta. Utiliza el HttpClient de Angular por debajo, lo que significa que puedes aprovechar funcionalidades como los interceptores.
Aunque resource y httpResource son APIs experimentales en Angular v20, representan una dirección prometedora para gestionar el estado asíncrono de manera más integrada y reactiva con el ecosistema de Signals, haciendo que la carga y actualización de datos sea más intuitiva y potente.
Iremos informando a medida que avance la API y se incorpore definitivamente a Angular.
Adiós a Zone.js: Zoneless (Developer Preview)
Históricamente, Angular ha dependido de Zone.js para gestionar la detección de cambios y notificar al framework sobre cuándo actualizar el DOM en respuesta a eventos asíncronos como timers, peticiones HTTP o eventos del DOM. Zone.js también ha jugado un papel en la captura de errores y en la señalización de cuándo una aplicación renderizada en el servidor está lista para ser enviada al cliente. Aunque útil, Zone.js puede añadir sobrecarga y dificultar la depuración.
Angular ha estado trabajando en un modelo alternativo llamado Zoneless, que permite a los desarrolladores eliminar la dependencia de Zone.js por completo.
En Angular v20, la funcionalidad Zoneless ha sido promovida a Developer Preview.
Con Zoneless, los desarrolladores obtienen un control explícito sobre cuándo y cómo se ejecuta la detección de cambios. Esto se logra, por ejemplo, llamando a markForCheck o aprovechando el conocimiento inherente de los cambios de estado que tienen las Señales, que acabamos de ver. Combinar Zoneless con Signals es una forma muy potente de disparar actualizaciones de forma más precisa.
Se han abordado los desafíos que surgían al eliminar Zone.js, como el manejo de errores y el flushing de aplicaciones SSR. La versión v20 incluye un manejador por defecto para unhandledRejection y uncaughtException en Node.js durante SSR para evitar que el servidor se caiga en caso de errores.
En el cliente, se puede incluir provideBrowserGlobalErrorListeners en los providers para gestionar errores globales.
Puedes empezar a usar Zoneless actualizando tus providers para incluir provideZonelessChangeDetection() y provideBrowserGlobalErrorListeners(), y asegurándote de eliminar el polyfill de zone.js de tu angular.json. Para nuevos proyectos, la CLI permitirá iniciarlos como Zoneless desde el principio:
Es importante recordar que, al estar en la fase Developer Preview, Zoneless aún puede experimentar cambios de última hora dentro de esta misma versión "major" a lo largo de los próximos meses y antes de la v21.
Server-Side Rendering (SSR) más robusto y estable
Las aplicaciones web modernas no solo buscan una excelente experiencia de usuario en el navegador, sino también un tiempo rápido de carga inicial y una mejor optimización para motores de búsqueda (SEO). Aquí es donde el Server-Side Rendering (SSR) o renderizado en el lado del servidor juega un papel crucial. Históricamente, implementar SSR podía presentar bastantes dificultades con Angular, pero el equipo ha estado trabajando mucho para simplificarlo y hacerlo más potente.
En Angular v20, vemos una consolidación significativa de sus características "insignia" de SSR, con varias de ellas alcanzando el codiciado estado "estable".
Hidratación incremental
Una de las piezas clave que ahora es estable es la hidratación incremental (incremental hydration).
Para entenderlo, primero pensemos en la hidratación tradicional. Es el proceso de coger el HTML renderizado en el servidor y "revivirlo" en el navegador, reutilizando la estructura del DOM generada en el servidor, preservando el estado de la aplicación y transfiriendo los datos obtenidos previamente. Ahí es nada.
La hidratación evita que el navegador tenga que recrear todos los nodos del DOM desde cero, lo que mejora el rendimiento.
La hidratación incremental en Angular lleva esto un paso más allá: te permite dejar secciones de tu aplicación deshidratadas inicialmente y activar su hidratación de forma incremental sólo cuando es necesario, basándose en un trigger o disparador específico. Esto significa que tus usuarios no tienen que descargar todo el JavaScript asociado a una página de golpe. En su lugar, solo se descarga y ejecuta el código de las partes con las que se interactúa o que entran en el viewport en un momento dado.
Puedes configurarlo de forma sencilla en tus providers utilizando provideClientHydration(withIncrementalHydration()) y controlarlo en tus plantillas con las vistas diferibles (deferrable views) y sus triggers. Este enfoque reduce el tamaño inicial de los paquetes de JavaScript, mejorando el rendimiento.
Modo de renderizado por ruta
Otra característica de SSR que se ha promovido a estable en v20 es la configuración del modo de renderizado a nivel de ruta (route-level rendering mode configuration). Esta funcionalidad es especialmente útil para aplicaciones con renderizado híbrido, donde no todas las rutas tienen los mismos requisitos.
Ahora, puedes especificar si una ruta debe ser renderizada en el servidor (RenderMode.Server), en el cliente (RenderMode.Client), o si debe ser prerrenderizada (RenderMode.Prerender) en el momento de la compilación (generación de sitio estático o SSG).
Esta flexibilidad te da control completo sobre la estrategia de renderizado para optimizar el rendimiento, el SEO y la experiencia general del usuario. Incluso puedes definir funciones asíncronas, como getPrerenderParams, para determinar dinámicamente los parámetros necesarios para el prerrenderizado de rutas con identificadores.
Directivas estructurales clásicas declaradas como obsoletas
El flujo de control embebido (@if, @for, @switch) se introdujo en la versión 17 para reemplazar a las directivas estructurales tradicionales (*ngIf, *ngFor, *ngSwitch) con una sintaxis más cercana a JavaScript. Ofrece varias ventajas:
- Una sintaxis más intuitiva.
- Uso más sencillo al no requerir la importación de módulos o directivas individuales.
- Mejoras de rendimiento gracias a un algoritmo de diffing actualizado.
- Mejor tipado a través del type narrowing.
Con más de la mitad de las aplicaciones creadas con la versión 17 o posterior utilizando esta característica , Angular 20 da un paso formal: las directivas estructurales clásicas (*ngIf, *ngFor, y *ngSwitch) han sido formalmente declaradas como obsoletas .
Bajo la política de obsolescencia de Angular, esto significa que estas directivas podrían ser eliminadas en la versión 22.
La migración a la nueva sintaxis es automática cuando utilizas ng update. Existe también un esquemático (ng generate @angular/core:control-flow) para migrar automáticamente tus proyectos existentes a la nueva sintaxis.
Este cambio dirige a los desarrolladores hacia un código de plantilla más limpio, reactivo y con mejor rendimiento, alineado con las capacidades de Signals.
Pulido de la experiencia del desarrollador y otras mejoras
Angular 20 es una versión que no solo trae nuevas APIs y estabiliza funcionalidades clave, sino que también dedica esfuerzos importantes a pulir la experiencia general del desarrollador (DX). Se han integrado nuevas herramientas, refinado sintaxis existentes y actualizado guías para hacer el desarrollo con Angular más eficiente y agradable.
Aquí destacamos varias de estas mejoras:
- Integración mejorada de depuración y perfilado en las DevTools del navegador: para proporcionar información más detallada sobre el rendimiento de la aplicación, Angular 20 ha colaborado con el equipo de Chrome DevTools para integrar datos de perfilado específicos de Angular directamente en el panel "Rendimiento". Esto permite ver datos de tiempo de ejecución de Angular, como la renderización de componentes, los ciclos de detección de cambios y la ejecución de manejadores de eventos, dentro de la misma línea de tiempo que otras actividades de JavaScript. La integración apenas influye en el rendimiento ni interfiere en las medidas y utiliza la API
console.timeStamp. Las entradas están codificadas por colores para distinguir el código TypeScript del autor del código generado por el compilador. Puedes habilitar esta función ejecutando el comando ng.enableProfiling() en la consola del navegador o en el código de tu aplicación.
-
Mejoras en las APIs del Framework y la Sintaxis de Plantillas:
- La función
createComponent para crear componentes dinámicamente ahora permite aplicar directivas y especificar bindings (inputBinding, outputBinding, twoWayBinding) de forma más sencilla. Esto simplifica la configuración de componentes creados en tiempo de ejecución.
- Se ha ampliado la sintaxis de las expresiones en plantillas para permitir el uso de operadores como el exponencial (
{{ n ** 2 }}) y el in ({{ name in person }}).
- Ahora se pueden usar literales de plantilla sin etiquetar directamente en las expresiones (
<div [class]="``layout col-${colWidth}``"></div>), lo que mejora la legibilidad y permite una interpolación de cadenas más limpia para cosas como nombres de clase dinámicos.
-
Diagnósticos extendidos: para ayudar a los desarrolladores a evitar errores comunes, se han introducido verificaciones estáticas que detectan problemas como nullish coalescing no válidos, la falta de importaciones para directivas estructurales y una advertencia cuando la función track en un bloque @for no se invoca correctamente. Esto ayuda a corregir errores antes de la ejecución.
-
Actualizaciones en test (Experimental): con la obsolescencia de Karma, Angular ha estado explorando alternativas. Angular 20 introduce soporte experimental para Vitest, un test runner que soporta tanto entornos Node como pruebas en navegador. También hay soporte experimental para Jest (entorno Node) y Web Test Runner (navegador). La comunidad está invitada a probarlos y proporcionar feedback para ayudar a decidir qué soluciones soportar a largo plazo.
Angular 20: un paso firme hacia la madurez
Angular v20 llega para consolidar el trabajo de los últimos años, enfocándose en pulir, estabilizar y mejorar la experiencia general del framework. No se trata tanto de introducir muchas características completamente nuevas, sino de asentar las bases de funcionalidades clave que ya se venían desarrollando. Para quienes se inician en Angular o están pensando en aprenderlo, esta versión presenta un panorama mucho más claro y robusto.
Uno de los puntos más relevantes y que simplifica enormemente el desarrollo reactivo es la estabilización de gran parte del ecosistema de Signals. Tras varias versiones en estado experimental o de previsualización, ahora las funcionalidades esenciales para manejar el estado de forma reactiva con Signals pueden usarse con total confianza en producción. Esto es una excelente noticia, ya que Signals ofrece una forma más intuitiva y con menos código de gestionar los cambios de datos en tu aplicación, haciendo que el aprendizaje de la reactividad en Angular sea más directo y agradable. Lo incorporaremos en breve a nuestro curso de Angular, al ser ya definitivo y la manera recomendada de desarrollar.
La experiencia del desarrollador (DX) es otro pilar clave de esta versión. Se han implementado mejoras en la integración con las herramientas de desarrollo del navegador para facilitar la identificación de cuellos de botella de rendimiento específicos de Angular. La guía de estilo ha sido actualizada para ser más moderna y simple, reduciendo la "verborrea" en la nomenclatura de archivos y clases por defecto en nuevos proyectos. Además, se consolida la preferencia por la sintaxis de control de flujo integrada (introducida en v17), marcando las directivas estructurales tradicionales como obsoletas. Esta nueva sintaxis es más cercana a JavaScript y hace que las plantillas sean más legibles para quienes vienen de otros entornos o están aprendiendo e iniciándose con Angular.
Como detalle simpático, en esta versión han lanzado un esfuerzo divertido y comunitario para elegir una mascota oficial que represente al framework. Una moda que están siguiendo muchos productos últimamente y que, personalmente no comprendo, pero bueno... De momento hay algunos bocetos (horrendos IMHO), pero esperan que cuando haya uno definitivo se pueda tener merchandising (llaveros, camisetas...) que ayuden a conectar a Angular con la comunidad 🙄
En definitiva, Angular v20 es una versión que fortalece la base del framework, haciendo que características potentes y modernas como Signals y SSR sean más accesibles y fiables. Las mejoras en la experiencia de desarrollo y las simplificaciones en la sintaxis y las convenciones hacen que Angular sea más acogedor para los nuevos desarrolladores.
Es un excelente momento para aprender Angular desde cero, ya que ofrece caminos claros y herramientas maduras para construir aplicaciones web eficientes y modernas. Y además las empresas adoran Angular...