Dentro de las novedades que tenemos en Angular 18 hay unas que destacan sobre las demás que son las que tienen que ver con signal y los pasos que está dando el equipo de Angular para poder quitar la dependencia que tiene ante Zone.js y cómo va poco a poco quitándosela de encima. Aún les faltan bastantes partes como la gestión de los formularios y la navegación de rutas, pero van a avanzando con paso firme y según ellos teniendo en cuenta a las bibliotecas del ecosistema Angular para no dejarlas atrás.

En esta entrada nos centraremos en ver las novedades de esta nueva versión Angular 18, veremos los planes que tiene Google para Angular a futuro

angular.dev

La web https://angular.dev/ ya es la web por defecto para la documentación de Angular 18, por lo que sale de Beta y ya es la documentación oficial de Angular en su última versión.

HttpClientModule cambia su carga

Ha cambiado la manera de cargar el módulo de Cliente Http de Angular, que es una de las partes esenciales para la realización de consultas Http por parte de componentes y servicios de Angular.

import {ApplicationConfig} from '@angular/core';
import {provideHttpClient} from "@angular/common/http";
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient()
  ]

};

Como vemos cambia la manera de importar esta biblioteca y que si no lo hacemos nos fallará la compilación de la aplicación.

Signals

Effect

El uso de Effect aunque estaba presente en Angular 17 no lo habíamos cubierto en este blog. Pero la idea es que se llame a una función cada vez que un valor de un signal cambie. De una manera similar al useEffect de React

Input

Los InputSignal son un tipo especial de señales que nos van a permitir cambiar la manera en la cual manejamos los datos entrada de un componente Angular, si antes usábamos un @Input delante la propiedad que queríamos nos pudiera pasar cuando invocaban el componente ahora bastará con usar la función input de @angular/core

Model

Los ModelSignal son un tipo de especial de señales que nos van a permitir una comunicación más fluida entre componentes principales y componentes hijos (Padre->carga->Hijo) para que cuando haya cambiado el modelo dentro del componente hijo cambie a su vez el valor dentro del componente padre.

Entonces definimos un atributo usando el método model de @angular/core que funciona como una especie de @Input y @Output supersencillo

Queries as Signals

Las consultas que nosotros hagamos sobre los hijos (child) de la estructura del dom o de componentes hijos de nuestro componente principal ahora pueden devolverse como signals y tenemos funciones de consulta para estas nuevas operaciones viewChild y viewChildren que nos devolverán objetos de tipo Signal<ElementRef | undefined> ó Signal<MiComponente | undefined>

Eventos de cambio de los estados en formularios

A partir de ahora podremos subscribirnos a los eventos que disparen propiedades de objetos de Controles del Formulario (FormControl, FormGroup y FormArray).

¿Qué falta para quitarse Zone.js?

Todavía no puede quitarse por completo el uso de Zonejs en el package.json, porque hay muchas partes de Angular que todavía dependen de esta funcionalidad.

Como el equipo de Angular quiere dar soporte a las bibliotecas que dependen de Angular para funcionar y no romper con el ecosistema de Angular tanto de desarrolladores de aplicaciones como de bibliotecas, lo están haciendo poco a poco.

Todavía quedan por migrar al nuevo sistema, cosas tan importantes como el manejo de formularios y el sistema de navegación de rutas, funcionalidades clave de cualquier aplicación Angular.

Por lo que se prevee que el equipo de Angular en nuevas versiones vaya liberando el uso de signals en otras partes del core de Angular.

Suponemos que en la versión 19 veremos avances en esta línea, pero ZoneJS tiene las versiones contadas en Angular, recomendamos encarecidamente que aquellos desarrlladores y desarrolladoras de Angular se pasen al uso de signals lo más pronto posible para mejorar el rendimiento de las aplicaciones y sin el soporte de zonejs.

Control Flow Estable

El nuevo sistema de control de flujo en plantillas ya se considera estable, por lo que es el sistema ideal para la creación de nuevos componentes que requieran de la necesidad de manejar por ejemplo sentencias condicionales y bucles en las plantillas de Angular

Angular Material 3

El equipo de Angular ha liberado la tercera versión del motor de componentes visuales de Material para Angular que permite un mayor nivel de personalización que las versiones anteriores e incorpora el uso de views deferrables (en diferido @defer) y el nuevo control de flujo que apareció en Angular 16

Server Side Rendering e Hidratación

Se ha realizado una serie de mejoras del sistema de renderizado por parte del servidor que es usado por datos de Google por parte el 76% de las aplicaciones Angular, por lo que han incorporado la posibilidad de que los bloques de i18n (sistema de internacionalización de Angular) puedan ser hidratados con el SSR en developer preview.

Se han incorporado en las Angular Devtools una nueva funcionalidad que permite ver visualmente en modo overlay cómo se han cargado los componentes de la página actual desde la perspectiva del sistema de Hidratación.

Todos los componentes de Angular Material y el CDK son compatibles ya con el sistema de Hidratación.

Event Replay

Debido a la integración de Wiz con Angular se están trayendo algunas funcionalidades como la posibilidad de realizar hidrataciones parciales con el uso de Event Replay.

La idea es que hasta que la página no se hidrata completamente no se guardaban ni ejecutaban los eventos que haya realizado el usuario hasta ese momento. Con Event Replay lo que hace en Angular 18 en grabar esos eventos y reproducirlos cuando la página se haya cargado completamente.

Por lo que mejora la experiencia de usuario, ya que le usuario no tiene porqué repetir esas acciones que ha realizado durante la carga de la página. Esta funcionalidad está todavía en developer preview.

Contenido si no hay ng-content

Se ha resuelto uno de los problemas que tenía la carga de los ng-content en las plantillas que ahora permite la definición de un contenido por defecto si falla el componente

Nuevo sistema de compilación de la aplicación

En Angular 18 cuando actualizas tu aplicación Angular 17 a Angular 18 (ng update), tal como hemos contado en una entrada anterior, se actualiza al nuevo sistema de compilación basado en Vite y esbuild.

Por lo que el sistema de compilación en modo desarrollo es mucho más rápido que antes y ahora se instala el @angular/cli bastante más rápido

Más novedades

• Uso de Typescript 5.4
• Uso de Redirección de Rutas como funciones
• AnalogJS con el NextJs de Angular, con cosas tan chulas como los componentes de un sólo fichero
• Youtube usa la reactividad de Angular
• Están trabajando en su integración con Vite, NX, Cypress, Puppetieer y Storybook

Conclusiones

Como vemos es una versión repleta de novedades que van a cambiar cómo funciona Angular desde sus bases principales, donde Signals es parte esencial del proceso de eliminación de la necesidad del uso de ZoneJS.

Estaremos atentos a esta novedades en futuras versiones de Angular

Referencia

Blog oficial de Google: https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe