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 18

¿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 y 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 de @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!

Descubre la formación a tu medida

Rellena el formulario para obtener más información sobre los cursos.

Nombre *

Apellido *

Email corporativo *

Tamaño de la empresa *

Tamaño de la empresa *

Número de teléfono *

Términos y condiciones *

Acepto los términos y condiciones

Solicitar información

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!