Las Novedades más Destacadas Que Trae Angular 16 – Parte 2 (Final)

Nube Colectiva

hace 2 años

En esta página:

En la parte anterior llamada Las Novedades más Destacadas Que Trae Angular 16 – Parte 1, pudimos apreciar nuevas y geniales características que trae esta versión 16 de Angular, entre las características que mencionamos están: Angular Signals (Señales) e Interoperabilidad RxJS, estos enfoques forman parte de la nueva Reactividad en la que viene trabajando Angular, asimismo compartimos sobre Hidratación en Angular que mejora el renderizado de Angular en el lado del servidor, también vimos otras funciones nuevas más en la parte 1. En esta segunda parte y última terminaremos de ver todas Las Novedades más Destacadas Que Trae Angular 16, vamos con ello.

Partes

Parte 1
Parte 2 (Final)

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Antes de continuar, te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa” y “Ventajas y Desventajas de Usar 2 o Más Monitores Para un Desarrollador” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Las Novedades más Destacadas Que Trae Angular 16 – Parte 2 (Final).

Al igual que en la parte anterior, para conocer mejor las novedades, colocaré el nombre de la novedad, un texto descriptivo y una imagen o elemento referencial.

Herramientas Avanzadas Para Desarrolladores

En continuación te compartiré algunos aspectos destacados de la CLI de Angular y el servicio de lenguajes.

Vista previa para desarrolladores del sistema de compilación basado en esbuild

Hace más de un año, el equipo de Angular anunció que esta trabajando en la compatibilidad experimental con esbuild en la CLI de Angular para que tus compilaciones sean más rápidas. El equipo de Angular está emocionado de compartir que en v16 el sistema de compilación basado en esbuild ingresa a la versión preliminar para desarrolladores. Las primeras pruebas mostraron una mejora de más del 72 % en las construcciones de producción en frío.

Ahora ng serve usa Vite para el servidor de desarrollo, y esbuild potencia tanto tus compilaciones de desarrollo como de producción.

El equipo de Angular enfatiza que Angular CLI se basa en Vite exclusivamente como servidor de desarrollo. Para admitir la coincidencia de selectores, el compilador de Angular debe mantener un gráfico de dependencia entre sus componentes, lo que requiere un modelo de compilación diferente al de Vite.

Puedes probar Vite + esbuild actualizando tu archivo angular.json:


...
"architect": {
  "build": {                    /* <span>Agrega el sufijo esbuild </span>*/
    "builder": "@angular-devkit/build-angular:browser-esbuild",
...

...

"architect": {

"build": { /* <span>Agrega el sufijo esbuild </span>*/

"builder": "@angular-devkit/build-angular:browser-esbuild",

...

A continuación, abordaremos el soporte para i18n antes de que este proyecto salga de la versión preliminar para desarrolladores.

Mejores pruebas unitarias con Jest y Web Test Runner

Basado en encuestas de desarrolladores en Angular y la comunidad de JavaScript más amplia, Jest es uno de los frameworks de prueba y corredores de prueba más queridos. El equipo de Angular recibio numerosas solicitudes para admitir Jest, que viene con una complejidad reducida ya que no se requieren navegadores reales.

El equipo de Angular está feliz de anunciar que estan introduciendo el soporte experimental de Jest. En una versión futura, también se moverá los proyectos de Karma existentes a Web Test Runner para continuar admitiendo pruebas unitarias basadas en navegador. Esto no será operativo para la mayoría de los desarrolladores.

Puedes experimentar con Jest en nuevos proyectos instalando Jest con el comando npm install jest –save-dev y actualizando tu archivo angular.json:


{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:jest",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": ["zone.js", "zone.js/testing"]
          }
        }
      }
    }
  }
}

{

"projects": {

"my-app": {

"architect": {

"test": {

"builder": "@angular-devkit/build-angular:jest",

"options": {

"tsConfig": "tsconfig.spec.json",

"polyfills": ["zone.js", "zone.js/testing"]

}

Puedes obtener más información sobre la futura estrategia de pruebas unitarias en una reciente publicación en el blog de Angular.

Autocompletar importaciones en plantillas

¿Cuántas veces usas un componente o una canalización en una plantilla para obtener un error de la CLI o del servicio de lenguaje que en realidad no ha importado la implementación correspondiente? ¡Apuesto que un montón de veces!

El servicio de lenguajes ahora permite la importación automática de componentes y pipes.

La anterior animación muestra la funcionalidad de importación automática del servicio de idoma de Angular en Visual Studio Code.

Y hay más

En v16 también se habilito el soporte para TypeScript 5.0, con soporte para decoradores ECMAScript, eliminando la sobrecarga de ngcc, agregando soporte para service workers y app shell en aplicaciones independientes, ampliando el soporte de CSP en la CLI , ¡y más !

Mejorar la experiencia del desarrollador

Junto con las grandes iniciativas en las que el equipo de Angular se enfoca, también estan trabajando para brindar funciones muy solicitadas.

Entradas requeridas

Desde que se presento Angular en 2016, no ha sido posible obtener un error de tiempo de compilación si no se especifica un valor para una entrada específica. El cambio agrega cero gastos generales en el tiempo de ejecución, ya que el compilador de Angular realiza la verificación en el momento de la compilación. ¡ Los desarrolladores siguieron solicitando esta función a lo largo de los años y obtuvimos una fuerte indicación de que será muy útil!

En v16 ahora puedes marcar una entrada como requerida:


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

@Component(...)

export class App {

@Input({ required: true }) title: string = '';

}

Pasar datos del enrutador como entradas de componentes

La experiencia del desarrollador del enrutador ha avanzado rápidamente. Una solicitud de función popular en GitHub solicita la capacidad de vincular parámetros de ruta a las entradas del componente correspondiente. ¡El equipo de Angular se complace en compartir que esta función ya está disponible como parte de la versión v16!

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

Datos de ruta: resoluciones y propiedades de datos
Parámetros de ruta
Parámetros de consulta

Este es un ejemplo de cómo puedes acceder a los datos desde un solucionador de rutas:


const routes = [
  {
    path: 'about',
    loadComponent: import('./about'),
    resolve: { contact: () => getContact() }
  }
];

@Component(...)
export class About {
  // The value of "contact" is passed to the contact input
  @Input() contact?: string;
}

const routes = [

{

path: 'about',

loadComponent: import('./about'),

resolve: { contact: () => getContact() }

}

];

@Component(...)

export class About {

// The value of "contact" is passed to the contact input

@Input() contact?: string;

}

Compatibilidad con CSP para estilos en línea

Los elementos de estilo en línea que Angular incluye en el DOM para estilos de componentes violan la style-src la cual es parte de la Política de seguridad de contenido (CSP) predeterminada. Para solucionar esto, deben contener un atributo nonce o el servidor debe incluir un hash del contenido del estilo en el encabezado del CSP. Aunque en Google no se encontro un vector de ataque significativo para esta vulnerabilidad, muchas empresas imponen un CSP estricto, lo que lleva a la popularidad de una solicitud de función en el repositorio de Angular.

En Angular v16, se inplemento una nueva función 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 inserta. Hay dos formas de especificar el nonce: usando el atributo ngCspNonce o mediante el token de inyección CSP_NONCE.

El atributo ngCspNonce es útil si tiene acceso a plantillas del lado del servidor que pueden agregar nonce tanto al encabezado como al construir la respuesta index.html.


<html>
<body>
  <app ngCspNonce="{% nonce %}"></app>  
</body>
</html>

<html>

<body>

</body>

</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 index.html en caché:


import {bootstrapApplication, CSP_NONCE} from '@angular/core';
import {AppComponent} from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [{
    provide: CSP_NONCE,
    useValue: globalThis.myRandomNonceValue
  }]
});

import {bootstrapApplication, CSP_NONCE} from '@angular/core';

import {AppComponent} from './app/app.component';

bootstrapApplication(AppComponent, {

providers: [{

provide: CSP_NONCE,

useValue: globalThis.myRandomNonceValue

}]

});

ngOnDestroy flexible

Los ganchos del ciclo de vida de Angular brindan mucha potencia 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 hizo a OnDestroy inyectable que permite la flexibilidad que los desarrolladores han estado pidiendo. Esta nueva característica te permite inyectar DestroyRef a un componente, directiva, servicio o pipe, y registrar el enlace del ciclo de vida onDestroy. Se puede inyectar DestroyRef en cualquier lugar dentro de un contexto de inyección, incluso fuera de tu componente; en tal caso, el gancho onDestroy se ejecuta cuando se destruye un inyector correspondiente:


import { Injectable, DestroyRef } from '@angular/core';

@Injectable(...)
export class AppService {
  destroyRef = inject(DestroyRef);

  destroy() {
    this.destroyRef.onDestroy(() => /* cleanup */ );
  }
}

import { Injectable, DestroyRef } from '@angular/core';

@Injectable(...)

export class AppService {

destroyRef = inject(DestroyRef);

destroy() {

this.destroyRef.onDestroy(() => /* cleanup */ );

}

Etiquetas de cierre automático

Una característica muy solicitada que se implemento recientemente te permite usar etiquetas de cierre automático para componentes en plantillas Angular. ¡Es una pequeña mejora en la experiencia del desarrollador que podría ahorrarte algo de tipeo!

Ahora puedes reemplazar:


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

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

Con esto:


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

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

Componentes Mejores y Más Flexibles

Durante los últimos dos trimestres, el equipo de Angular trabajo en estrecha colaboración con el equipo de diseño de Google Material para proporcionar la implementación de Material 3 de referencia para la Web con material angular. Los componentes basados en la web de MDC que se envió en 2022 sentaron las bases para este esfuerzo.

Como próximo paso, se está trabajando para lanzar a finales de este año una API de tematización expresiva basada en tokens que permite una mayor personalización de los componentes de material de Angular.

Es importante recordar que se eliminarán los componentes heredados que no están basados en MDC en v17. Asegúrate de seguir la guía de migración para pasar a la última versión.

Continuando con la iniciativa de accesibilidad

¡Siguiendo la misión de Google, Angular te permite crear aplicaciones web para todos! Es por eso que el equipo de Angular está invirtiendo continuamente en una mejor accesibilidad para los componentes Angular CDK y Material.

Aspectos Destacados de la Contribución de la Comunidad

Dos de las características introducidas por la comunidad que el equipo de Angular quiere destacar son:

El diagnóstico ampliado para el uso adecuado de ngSkipHydration por Matthieu Riegler.
La introducción de permitir el uso del trabajador provideServiceWorker del servicio angular sin NgModules por Julien Saguet.

Más de 175 personas contribuyeron a Angular 16 en GitHub y miles más contribuyeron a través de publicaciones de blog, charlas, podcasts, videos, comentarios sobre los RFC de reactividad, etc.

El equipo de Angular Agradece a todos los que ayudaron a hacer que este lanzamiento fuera especial.

Mantener el Impulso Juntos

La versión 16 es el trampolín para las futuras mejoras que llegarán a la reactividad de Angular y la representación del lado del servidor durante el próximo año. Angular hará avanzar la Web al innovar en la experiencia y el rendimiento de los desarrolladores.

Puede ser parte de Angular Momentum y ayudar a dar forma al futuro del framework compartiendo tus pensamientos en las próximas RFC, encuestas o redes sociales.

Hasta aquí terminamos con este Post en donde te compartimos las novedades más destacadas que nos trajo la versión 16 de Angular, nos vemos en un próximo update de Angular.

Conclusión

En este Post hemos conocido las novedades que trae Angular 16 y la mejor manera de aprender estas nuevas características es poniendolas en práctica. Como se dice, la práctica hace al maestro. Descarga Angular 16 y empieza a crear un proyecto.

Nota(s)

Los novedades y características mencionadas en este Post pueden dejar de existir, ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a Angular.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.