▷ ¡Lanzamiento de Angular CLI 12.2!

Angular CLI 12.2 está disponible con algunas características nuevas y emocionantes. El equipo lanzó esta versión el 5 de agosto de 2021. Al observar las características de Angular 12 a principios de este año, podemos decir que la v12.2 es una versión más pequeña con nuevas versiones menos pero significativas. La versión 12.2 ha traído cambios importantes al núcleo y al compilador del marco. Veamos cuáles son.

Características de Angular v12.2

Formularios

Entre las nuevas características de Angular 12.2, hay algunas actualizaciones en el núcleo del framework, como el formulario. 

El formulario en la versión 12.2 de Angular ha atraído mucha atención con la adición de los métodos addValidators, hasValidator y removeValidators. Como puede esperar, permiten agregar y eliminar un validador o una variedad de validadores hacia/desde un control de estructura, grupo o matriz.

A partir de ahora, necesitaba eliminar todos los validadores y restablecerlos cuando necesitara agregar/eliminar uno, lo cual no era bueno para casos de uso realmente normales, como hacer que un campo sea requerido dependiendo de una condición:

// si la actualización automática está habilitada, entonces se requiere la frecuencia

{
  if (isAutoRefreshEnabled) {
    this.autoRefreshFrequencyCtrl.setValidators([frequencyValidator, Validators.required]);
  } else {
    this.autoRefreshFrequencyCtrl.setValidators(frequencyValidator);
  }
  this.autoRefreshFrequencyCtrl.updateValueAndValidity();
});

Con la nueva versión 12.2 de Angular, puede simplificar dicho código:

{
  if (isAutoRefreshEnabled) {
    this.autoRefreshFrequencyCtrl.addValidators(Validators.required);
  } else {
    this.autoRefreshFrequencyCtrl.removeValidators(Validators.required);
  }
  this.autoRefreshFrequencyCtrl.updateValueAndValidity();
});

Estas técnicas tienen una forma para validadores poco convencionales con hasAsyncValidator, addAsyncValidators y removeAsyncValidators. Tenga en cuenta que las técnicas hasValidator / hasAsyncValidator funcionan solo con una referencia a la función de validación específica, por lo que esto no funciona, por ejemplo:

this.autoRefreshFrequencyCtrl = new FormControl(10, Validators.min(5));
this.autoRefreshFrequencyCtrl.hasValidator(Validators.min(5)) 
// returns false

mientras que esto funciona:

const frequencyValidator = Validators.min(5);
this.autoRefreshFrequencyCtrl = new FormControl(10, frequencyValidator);
this.autoRefreshFrequencyCtrl.hasValidator(frequencyValidator) 
// returns true

Lo mismo ocurre con removeValidators / removeAsyncValidators, ya que utilizan hasValidator / hasAsyncValidator dentro de la estructura.

Plantillas

En el nuevo Angular 12.2, el compilador admite el subrayado como separador de números en formato, ya que ES2021 se considera en JavaScript. Ahora podrá escribir:

{{ 1_000_000 }}

Enrutador

Con la versión 12.2 de Angular, posiblemente puede proporcionar una RouteReuseStrategy a través de la DI para probar el módulo del enrutador. Inicialmente, antes de esta versión, solo podía usar la instanciación imperativa.

Ahora podrá escribir: 

TestBed.configureTestingModule({
  imports: [RouterTestingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }]
});

Compilación ng más rápida con esbuild

Una de las nuevas características de Angular 12.2 es la nueva CLI que aprovecha esbuild que acelera su compilación y crea su aplicación angular. Angular CLI 12.2 usa esbuild para optimizar el código construido, en colaboración con terser. Por muy rápido que sea esbuild, no cubre toda la optimización como terser. Ahora que la CLI está optimizada, el código se ejecuta en dos fases, una en esbuild y la otra en terser en el código optimizado de esbuild.

El esbuild también se utiliza para optimizar el CSS de las hojas de estilo de los componentes. Dado que esbuild es más rápido que CSSNano, genera resultados más pequeños. Aunque las hojas de estilo globales continúan optimizándose, también podría migrar a esbuild en el futuro si es compatible con sourcecap.

Advertencias de desaprobación de Sass

En caso de que esté utilizando el estilo scss, es posible que haya visto que dart-sass (que la CLI utiliza en el motor) muestra actualmente alertas para documentos Sass que utilizan el operador / obsoleto. 

Además, genera un montón de alertas. La comunidad está usando Font Awesome en ciertos proyectos y la CLI está registrando tantas líneas. Otra buena noticia es que CLI v12.2 oculta la advertencia para hojas de estilo de terceros. En cualquier caso, puede verlos con el indicador -verbose.

Actualizaciones a angular 12.2

Si desea actualizar a 12.2.0 sin problemas (o a cualquier otra versión, por cierto), he creado un proyecto Github para ayudar: angular-cli-diff . Elija la versión que está utilizando actualmente (12.0.0 por ejemplo) y la adaptación objetiva (12.2.0 por ejemplo), y le brinda una diferencia de todos los registros realizados por la CLI: angular-cli-diff/compare/12.0.0… 12.2.0. Tiende a ser una ayuda increíble junto con el comando oficial:

ng update @ angular/core @angular/[email protected]

Conclusión:

El equipo de desarrollo angular espera el lanzamiento de la versión 13 cerca de fin de año y se supone que incluirá algunas cosas que todos los desarrolladores de Angular han estado esperando como: formularios mecanografiados, precompilados para Ivy, paquetes Angular y mucho más.