Novedades y Características de Angular 16

¿Qué es Angular 16?

Angular es un framework de desarrollo de aplicaciones web de código abierto que permite construir aplicaciones de una sola página (SPA) de manera eficiente y escalable. Desarrollado y mantenido por Google.

Angular utiliza TypeScript como lenguaje de programación y ofrece una arquitectura basada en componentes, en la que los distintos elementos de la interfaz de usuario se organizan en componentes reutilizables.

Si quieres aprender más sobre Angular te recomendamos consultar la página de nuestro curso de Angular con la versión más reciente.

Actualmente existe una versión más reciente de Angular, Angular 19

¿Cuándo salió Angular 16?

El 14 de junio de 2023 el equipo de desarrolladores de Angular confirmó el lanzamiento de Angular 16 en su cuenta de Twitter, siendo esta la versión más reciente de Angular, la 16.1.

¿Cómo actualizar a Angular 16?

Hemos preparado un tutorial completo que te explicará cómo actualizar a la última versión disponible de Angular ,puedes consultarlo en el enlace anterior.

Novedades de Angular 16

Angular, uno de los frameworks más populares para el desarrollo de aplicaciones web, ha lanzado su versión 16 con emocionantes mejoras en cuanto a reactividad, renderizado en el servidor y herramientas. Esta versión representa el mayor avance desde el lanzamiento inicial de Angular e incluye más de 2,500 mejoras solicitadas por la comunidad en GitHub. A continuación, vamos a explorar algunas de las novedades más destacadas de Angular 16.

Reactividad rediseñada

En Angular 16, se ha introducido un nuevo modelo de reactividad que mejora significativamente el rendimiento y la experiencia del desarrollador. Este modelo es compatible con versiones anteriores y ofrece varias ventajas:

Mejor rendimiento en tiempo de ejecución al reducir el número de cálculos durante la detección de cambios.
Proporciona un modelo mental más sencillo para la reactividad, lo que facilita entender las dependencias de la vista y el flujo de datos en la aplicación.
Permite la reactividad detallada, lo que permitirá detectar cambios solo en los componentes afectados en futuras versiones.
Hace que Zone.js sea opcional en futuras versiones al utilizar señales para notificar al framework cuando el modelo ha cambiado.
Ofrece propiedades calculadas sin la penalización de recalcular en cada ciclo de detección de cambios.
Permite una mejor interoperabilidad con RxJS al presentar un plan para introducir entradas reactivas.

Angular Signals

En Angular 16, se ha agregado una nueva biblioteca de señales (

signals library

) que permite definir valores reactivos y expresar las dependencias entre ellos. Esta librería proporciona una forma más sencilla de manejar la reactividad en las aplicaciones Angular. Aquí tienes un ejemplo de cómo usarlo:

1@Component({
2  selector: 'my-app',
3  standalone: true,
4  template: `
5    {{ fullName() }} <button (click)="setName('John')">Click</button>
6  `,
7})
8export class App {
9  firstName = signal('Jane');
10  lastName = signal('Doe');
11  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
12
13  constructor() {
14    effect(() => console.log('Name changed:', this.fullName()));
15  }
16
17  setName(newName: string) {
18    this.firstName.set(newName);
19  }
20}

En este ejemplo, se crea un valor calculado (

fullName

) que depende de las señales

firstName

lastName

. También se declara un efecto (

effect

) que se ejecutará cada vez que se cambie el valor de alguna de las señales en las que depende (

fullName

, en este caso).

Interoperabilidad con RxJS

En Angular 16, se ha mejorado la interoperabilidad con RxJS al proporcionar funciones para convertir señales en observables y viceversa. Aquí tienes un ejemplo de cómo hacerlo:

1import { toObservable } from '@angular/core/rxjs-interop';
2
3@Component({...})
4export class App {
5  count = signal(0);
6  count$ = toObservable(this.count);
7
8  ngOnInit() {
9    this.count$.subscribe(() => ...);
10  }
11}

En este ejemplo, se convierte la señal

count

en un observable utilizando la función

toObservable

@angular/core/rxjs-interop

. Esto permite suscribirse a los cambios de la señal utilizando el operador

subscribe

Renderizado en el lado del servidor

El renderizado en el lado del servidor (Server-Side Rendering, SSR) ha mejorado significativamente en Angular 16. Ahora es más fácil y eficiente realizar el renderizado inicial en el servidor y luego hidratar la aplicación en el cliente.

Se ha agregado una nueva API y mejoras en Angular Universal, el paquete oficial de SSR de Angular. Estas mejoras incluyen:

Una API simplificada para el renderizado en el lado del servidor, lo que facilita su implementación y reduce la cantidad de código necesario.
Mejor rendimiento en el tiempo de inicio, lo que reduce el tiempo necesario para renderizar la aplicación en el servidor.
Mejor integración con las características de reactividad mencionadas anteriormente, lo que permite mantener la coherencia entre el servidor y el cliente al actualizar la vista.
Mejoras en la eficiencia y escalabilidad del renderizado en el lado del servidor, lo que permite manejar aplicaciones más grandes y con mayor carga de trabajo.

Estas mejoras en el SSR brindan beneficios como una mejor experiencia de usuario inicial al cargar la aplicación, mejor SEO y optimización del rendimiento general.

Creación de proyectos independientes desde cero

En Angular v16, ahora puedes crear nuevos proyectos independientes desde el principio. Para probar la vista previa para desarrolladores de los esquemas independientes, asegúrate de tener Angular CLI v16 y ejecuta:

1ng new --standalone

Obtendrás un proyecto más sencillo sin ningún NgModule. Además, ¡todos los generadores en el proyecto producirán directivas, componentes y pipes independientes!

Configuración de Zone.js

Después del lanzamiento inicial de las API independientes, se pidió popularmente poder configurar Zone.js con la nueva API

bootstrapApplication

Agregamos una opción para esto mediante

provideZoneChangeDetection

1bootstrapApplication(App, {
2  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
3});

Vista previa de desarrolladores basado en esbuild

En ng serve, ahora estamos utilizando Vite como servidor de desarrollo, ¡y esbuild potencia tanto tus compilaciones de desarrollo como de producción!

Angular CLI se basa exclusivamente en Vite como servidor de desarrollo. Para admitir la coincidencia de selectores, el compilador de Angular necesita mantener un gráfico de dependencias entre tus componentes, lo cual requiere un modelo de compilación diferente a Vite.

Puedes probar Vite + esbuild actualizando tu angular.json:

1 "architect": {
2  "build": {                     /* Agrega el sufijo esbuild */
3    "builder": "@angular-devkit/build-angular:browser-esbuild",

Mejor prueba unitaria con Jest y Web Test Runner

Con esta versión de Angular 16 se introduce el soporte experimental de Jest. En una versión futura, también se migrarán proyectos existentes de Karma a Web Test Runner para seguir admitiendo pruebas unitarias basadas en el navegador. Esto no afectará a la mayoría de los desarrolladores.

Puedes experimentar con Jest en nuevos proyectos instalando Jest con

npm install jest --save-dev

y actualizando tu archivo angular.json:

1{
2  "projects": {
3    "my-app": {
4      "architect": {
5        "test": {
6          "builder": "@angular-devkit/build-angular:jest",
7          "options": {
8            "tsConfig": "tsconfig.spec.json",
9            "polyfills": ["zone.js", "zone.js/testing"]
10          }
11        }
12      }
13    }
14  }
15}

Autocompletar importaciones en las plantillas

¿Cuántas veces has utilizado un componente o un pipe en una plantilla y has recibido un error del CLI o del servicio de lenguaje que en realidad no has importado la implementación correspondiente? ¡Apuesto que muchas veces!

El servicio de lenguaje ahora permite importar automáticamente componentes y pipes.

Entradas requeridas

Desde que se introdujo Angular en 2016, no ha sido posible obtener un error en tiempo de compilación si no se especifica un valor para una entrada específica. El cambio no agrega ninguna sobrecarga en tiempo de ejecución, ya que el compilador de Angular realiza la verificación en tiempo de compilación.

En v16, ahora puedes marcar una entrada como requerida:

1@Component(...)
2export class App {
3  @Input({ required: true }) title: string = '';
4}

Pasar datos del enrutador como entradas del componente

La experiencia de desarrollo del enrutador ha avanzado rápidamente. Una característica solicitada es la capacidad de vincular los parámetros de ruta a las entradas correspondientes del componente.

Ahora puedes pasar los siguientes datos a las entradas de un componente de enrutamiento:

Datos de la ruta: resolutores y propiedades de datos.
Parámetros de ruta.
Parámetros de consulta.

Aquí tienes un ejemplo de cómo puedes acceder a los datos desde un resolutor de ruta:

1 const routes = [
2  {
3    path: 'about',
4    loadComponent: import('./about'),
5    resolve: { contact: () => getContact() }
6  }
7];
8
9@Component(...)
10export class About {
11  // El valor de "contact" se pasa a la entrada "contact"
12  @Input() contact?: string;
13}

Puedes habilitar esta característica utilizando

withComponentInputBinding

como parte de

provideRouter

Soporte de CSP para estilos en línea

Los elementos de estilo en línea que Angular incluye en el DOM para los estilos de los componentes violan la directiva Content Security Policy (CSP) style-src por defecto. Para solucionar esto, deben contener un atributo

nonce

o el servidor debe incluir un hash del contenido del estilo en la cabecera CSP. Aunque en Google no encontramos un vector de ataque significativo para esta vulnerabilidad, muchas empresas imponen políticas de CSP estrictas.

En Angular v16, se ha implementado una nueva característica que abarca el framework, Universal, CDK, Material y la CLI, que te permite especificar un atributo

nonce

para los estilos de los componentes que Angular incluye en línea. Hay dos formas de especificar el

nonce

: mediante el atributo

ngCspNonce

o a través del token de inyección

CSP_NONCE

El atributo

ngCspNonce

es útil si tienes acceso a una plantilla en el lado del servidor que puede agregar el

nonce

tanto en la cabecera como en el archivo

index.html

al construir la respuesta.

1<html>
2    <body>
3        <app ngCspNonce="{% nonce %}"></app>  
4    </body>
5</html>

La otra forma de especificar el

nonce

es a través del token de inyección

CSP_NONCE

. Utiliza este enfoque si tienes acceso al

nonce

en tiempo de ejecución y deseas poder almacenar en caché el archivo

index.html

1 import {bootstrapApplication, CSP_NONCE} from '@angular/core';
2import {AppComponent} from './app/app.component';
3
4bootstrapApplication(AppComponent, {
5  providers: [{
6    provide: CSP_NONCE,
7    useValue: globalThis.myRandomNonceValue
8  }]
9});

ngOnDestroy flexible

Los hooks del ciclo de vida de Angular proporcionan mucho poder para conectarse en diferentes momentos de la ejecución de tu aplicación. Una oportunidad a lo largo de los años ha sido permitir una mayor flexibilidad, por ejemplo, proporcionar acceso a

OnDestroy

como un observable.

En v16, se ha hecho que

OnDestroy

sea inyectable, lo que permite la flexibilidad que los desarrolladores han estado solicitando. Esta nueva característica te permite inyectar

DestroyRef

correspondiente a un componente, directiva, servicio o pipe, y registrar el ciclo de vida

onDestroy

DestroyRef

se puede inyectar en cualquier lugar dentro de un contexto de inyección, incluso fuera de tu componente; en ese caso, el gancho

onDestroy

se ejecuta cuando el inyector correspondiente se destruye:

1import { Injectable, DestroyRef } from '@angular/core';
2
3@Injectable(...)
4export class AppService {
5  destroyRef = inject(DestroyRef);
6
7  destroy() {
8    this.destroyRef.onDestroy(() => /* limpieza */ );
9  }
10}

Etiquetas de cierre automático

Una característica que te permite utilizar etiquetas de cierre automático para componentes en las plantillas de Angular. Es una pequeña mejora en la experiencia de desarrollo que podría ahorrarte algo de escritura.

Ahora puedes reemplazar:

1<super-long-component-name [prop]="someVar"></super-duper-long-component-name>

con esto:

1<super-long-component-name [prop]="someVar"/>

Aprende Angular

En resumen, Angular 16 trae consigo emocionantes novedades y mejoras que hacen que el desarrollo de aplicaciones web sea más rápido, eficiente y flexible. Desde la capacidad de crear proyectos independientes desde cero hasta el soporte para Jest en las pruebas unitarias y la mejora en la importación automática de componentes y pipes, estas actualizaciones ofrecen a los desarrolladores herramientas poderosas para crear aplicaciones web de alto rendimiento.

Si estás interesado en aprender más sobre Angular y cómo aprovechar al máximo estas nuevas características, te invitamos a consultar nuestra página del curso de Angular online o presencial, donde podrás expandir tus conocimientos y dominar esta popular plataforma de desarrollo web. ¡No pierdas la oportunidad de impulsar tu carrera en el desarrollo web con Angular!

¿Qué es Angular 16?

Si quieres aprender más sobre Angular te recomendamos consultar la página de nuestro curso de Angular con la versión más reciente.

Actualmente existe una versión más reciente de Angular, Angular 19

¿Cuándo salió Angular 16?

El 14 de junio de 2023 el equipo de desarrolladores de Angular confirmó el lanzamiento de Angular 16 en su cuenta de Twitter, siendo esta la versión más reciente de Angular, la 16.1.

¿Cómo actualizar a Angular 16?

Hemos preparado un tutorial completo que te explicará cómo actualizar a la última versión disponible de Angular ,puedes consultarlo en el enlace anterior.

Novedades de Angular 16

Reactividad rediseñada

Mejor rendimiento en tiempo de ejecución al reducir el número de cálculos durante la detección de cambios.
Proporciona un modelo mental más sencillo para la reactividad, lo que facilita entender las dependencias de la vista y el flujo de datos en la aplicación.
Permite la reactividad detallada, lo que permitirá detectar cambios solo en los componentes afectados en futuras versiones.
Hace que Zone.js sea opcional en futuras versiones al utilizar señales para notificar al framework cuando el modelo ha cambiado.
Ofrece propiedades calculadas sin la penalización de recalcular en cada ciclo de detección de cambios.
Permite una mejor interoperabilidad con RxJS al presentar un plan para introducir entradas reactivas.

Angular Signals

En Angular 16, se ha agregado una nueva biblioteca de señales (

signals library

1@Component({
2  selector: 'my-app',
3  standalone: true,
4  template: `
5    {{ fullName() }} <button (click)="setName('John')">Click</button>
6  `,
7})
8export class App {
9  firstName = signal('Jane');
10  lastName = signal('Doe');
11  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
12
13  constructor() {
14    effect(() => console.log('Name changed:', this.fullName()));
15  }
16
17  setName(newName: string) {
18    this.firstName.set(newName);
19  }
20}

En este ejemplo, se crea un valor calculado (

fullName

) que depende de las señales

firstName

lastName

. También se declara un efecto (

effect

) que se ejecutará cada vez que se cambie el valor de alguna de las señales en las que depende (

fullName

, en este caso).

Interoperabilidad con RxJS

En Angular 16, se ha mejorado la interoperabilidad con RxJS al proporcionar funciones para convertir señales en observables y viceversa. Aquí tienes un ejemplo de cómo hacerlo:

1import { toObservable } from '@angular/core/rxjs-interop';
2
3@Component({...})
4export class App {
5  count = signal(0);
6  count$ = toObservable(this.count);
7
8  ngOnInit() {
9    this.count$.subscribe(() => ...);
10  }
11}

En este ejemplo, se convierte la señal

count

en un observable utilizando la función

toObservable

@angular/core/rxjs-interop

. Esto permite suscribirse a los cambios de la señal utilizando el operador

subscribe

Renderizado en el lado del servidor

Se ha agregado una nueva API y mejoras en Angular Universal, el paquete oficial de SSR de Angular. Estas mejoras incluyen:

Una API simplificada para el renderizado en el lado del servidor, lo que facilita su implementación y reduce la cantidad de código necesario.
Mejor rendimiento en el tiempo de inicio, lo que reduce el tiempo necesario para renderizar la aplicación en el servidor.
Mejor integración con las características de reactividad mencionadas anteriormente, lo que permite mantener la coherencia entre el servidor y el cliente al actualizar la vista.
Mejoras en la eficiencia y escalabilidad del renderizado en el lado del servidor, lo que permite manejar aplicaciones más grandes y con mayor carga de trabajo.

Estas mejoras en el SSR brindan beneficios como una mejor experiencia de usuario inicial al cargar la aplicación, mejor SEO y optimización del rendimiento general.

Creación de proyectos independientes desde cero

1ng new --standalone

Obtendrás un proyecto más sencillo sin ningún NgModule. Además, ¡todos los generadores en el proyecto producirán directivas, componentes y pipes independientes!

Configuración de Zone.js

Después del lanzamiento inicial de las API independientes, se pidió popularmente poder configurar Zone.js con la nueva API

bootstrapApplication

Agregamos una opción para esto mediante

provideZoneChangeDetection

1bootstrapApplication(App, {
2  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
3});

Vista previa de desarrolladores basado en esbuild

En ng serve, ahora estamos utilizando Vite como servidor de desarrollo, ¡y esbuild potencia tanto tus compilaciones de desarrollo como de producción!

Puedes probar Vite + esbuild actualizando tu angular.json:

1 "architect": {
2  "build": {                     /* Agrega el sufijo esbuild */
3    "builder": "@angular-devkit/build-angular:browser-esbuild",

Mejor prueba unitaria con Jest y Web Test Runner

Puedes experimentar con Jest en nuevos proyectos instalando Jest con

npm install jest --save-dev

y actualizando tu archivo angular.json:

1{
2  "projects": {
3    "my-app": {
4      "architect": {
5        "test": {
6          "builder": "@angular-devkit/build-angular:jest",
7          "options": {
8            "tsConfig": "tsconfig.spec.json",
9            "polyfills": ["zone.js", "zone.js/testing"]
10          }
11        }
12      }
13    }
14  }
15}

Autocompletar importaciones en las plantillas

El servicio de lenguaje ahora permite importar automáticamente componentes y pipes.

Entradas requeridas

En v16, ahora puedes marcar una entrada como requerida:

1@Component(...)
2export class App {
3  @Input({ required: true }) title: string = '';
4}

Pasar datos del enrutador como entradas del componente

La experiencia de desarrollo del enrutador ha avanzado rápidamente. Una característica solicitada es la capacidad de vincular los parámetros de ruta a las entradas correspondientes del componente.

Ahora puedes pasar los siguientes datos a las entradas de un componente de enrutamiento:

Datos de la ruta: resolutores y propiedades de datos.
Parámetros de ruta.
Parámetros de consulta.

Aquí tienes un ejemplo de cómo puedes acceder a los datos desde un resolutor de ruta:

1 const routes = [
2  {
3    path: 'about',
4    loadComponent: import('./about'),
5    resolve: { contact: () => getContact() }
6  }
7];
8
9@Component(...)
10export class About {
11  // El valor de "contact" se pasa a la entrada "contact"
12  @Input() contact?: string;
13}

Puedes habilitar esta característica utilizando

withComponentInputBinding

como parte de

provideRouter

Soporte de CSP para estilos en línea

nonce

En Angular v16, se ha implementado una nueva característica que abarca el framework, Universal, CDK, Material y la CLI, que te permite especificar un atributo

nonce

para los estilos de los componentes que Angular incluye en línea. Hay dos formas de especificar el

nonce

: mediante el atributo

ngCspNonce

o a través del token de inyección

CSP_NONCE

El atributo

ngCspNonce

es útil si tienes acceso a una plantilla en el lado del servidor que puede agregar el

nonce

tanto en la cabecera como en el archivo

index.html

al construir la respuesta.

1<html>
2    <body>
3        <app ngCspNonce="{% nonce %}"></app>  
4    </body>
5</html>

La otra forma de especificar el

nonce

es a través del token de inyección

CSP_NONCE

. Utiliza este enfoque si tienes acceso al

nonce

en tiempo de ejecución y deseas poder almacenar en caché el archivo

index.html

1 import {bootstrapApplication, CSP_NONCE} from '@angular/core';
2import {AppComponent} from './app/app.component';
3
4bootstrapApplication(AppComponent, {
5  providers: [{
6    provide: CSP_NONCE,
7    useValue: globalThis.myRandomNonceValue
8  }]
9});

ngOnDestroy flexible

OnDestroy

como un observable.

En v16, se ha hecho que

OnDestroy

sea inyectable, lo que permite la flexibilidad que los desarrolladores han estado solicitando. Esta nueva característica te permite inyectar

DestroyRef

correspondiente a un componente, directiva, servicio o pipe, y registrar el ciclo de vida

onDestroy

DestroyRef

se puede inyectar en cualquier lugar dentro de un contexto de inyección, incluso fuera de tu componente; en ese caso, el gancho

onDestroy

se ejecuta cuando el inyector correspondiente se destruye:

1import { Injectable, DestroyRef } from '@angular/core';
2
3@Injectable(...)
4export class AppService {
5  destroyRef = inject(DestroyRef);
6
7  destroy() {
8    this.destroyRef.onDestroy(() => /* limpieza */ );
9  }
10}

Etiquetas de cierre automático

Ahora puedes reemplazar:

1<super-long-component-name [prop]="someVar"></super-duper-long-component-name>

con esto:

1<super-long-component-name [prop]="someVar"/>

Novedades y Características de Angular 16

¿Qué es Angular 16?

¿Cuándo salió Angular 16?

¿Cómo actualizar a Angular 16?

Novedades de Angular 16

Reactividad rediseñada

Angular Signals

Interoperabilidad con RxJS

Renderizado en el lado del servidor

Creación de proyectos independientes desde cero

Descubre la formación a tu medida

Configuración de Zone.js

Vista previa de desarrolladores basado en esbuild

Mejor prueba unitaria con Jest y Web Test Runner

Autocompletar importaciones en las plantillas

Entradas requeridas

Pasar datos del enrutador como entradas del componente

Soporte de CSP para estilos en línea

ngOnDestroy flexible

Etiquetas de cierre automático

Aprende Angular

Descubre la formación a tu medida

Descubre la formación a tu medida

¡Empieza hoy y conviértete en un experto en Angular 19!

Curso de Angular 19 Online

Tutoriales relacionados

¿Qué es Astro? Mejor Framework Web

Novedades de Angular 20 (Última Versión)

¿Qué es un FullStack Developer? | Funciones y requisitos

Novedades y Características de Angular 16

¿Qué es Angular 16?

¿Cuándo salió Angular 16?

¿Cómo actualizar a Angular 16?

Novedades de Angular 16

Reactividad rediseñada

Angular Signals

Interoperabilidad con RxJS

Renderizado en el lado del servidor

Creación de proyectos independientes desde cero

Descubre la formación a tu medida

Configuración de Zone.js

Vista previa de desarrolladores basado en esbuild

Mejor prueba unitaria con Jest y Web Test Runner

Autocompletar importaciones en las plantillas

Entradas requeridas

Pasar datos del enrutador como entradas del componente

Soporte de CSP para estilos en línea

ngOnDestroy flexible

Etiquetas de cierre automático

Aprende Angular

Descubre la formación a tu medida

Descubre la formación a tu medida

¡Empieza hoy y conviértete en un experto en Angular 19!

Curso de Angular 19 Online

Tutoriales relacionados

¿Qué es Astro? Mejor Framework Web

Novedades de Angular 20 (Última Versión)

¿Qué es un FullStack Developer? | Funciones y requisitos

05

Curso de Angular 19 Online