Las Novedades más Destacadas Que Trae Angular 14 – 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 14 – Parte 1 pudimos ver un grupo de novedades que trae Angular 14, como los componentes independientes, la Tipificación Estrica Para Formularios, Mejoras prácticas optimizadas, Diagnóstico extendido para el desarrolladore, Mensajes de Error Tree-shakeable, entre otras características nuevas. En esta 2da parte y última, vamos a ver otro grupo de características importantes que trae Angular 14, vamos con el Post.

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: “Donde buscar ayuda sobre Programación” y “¿ Porqué Es Importante Saber Programar en la Ciberseguridad ?” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

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

Al igual que en la Parte 1, para conocer mejor las novedades, colocaré el nombre de la novedad, un texto descriptivo y una imagen referencial. Ya que Angular 14 trae muchas novedades este Post será en 2 partes, para asi poder leer mejor estas nuevas características.

Primitivos y Herramientas Incorporadas

Las mejoras en las herramientas y el CDK de Angular proporcionan los componentes básicos para un entorno de desarrollo más sólido, desde las primitivas del menú del CDK hasta la finalización automática de la CLI.

Nuevas Primitivas en Angular CDK

El Angular Component Dev Kit (CDK) proporciona un conjunto completo de herramientas para crear componentes de Angular. En Angular 14 el elemento menú y dialog del CDK pasan a ser estables.

Angular 14 incluye nuevas primitivas de CDK que se pueden usar para crear componentes personalizados más accesibles basados en los patrones de diseño de menús y barras de menús WAI-ARIA.


<ul cdkTargetMenuAim cdkMenuBar>
  <li cdkMenuItem    
      [cdkMenuTriggerFor]="file">
    File
  </li>
</ul>
<ng-template #file>
  <ul cdkMenu cdkTargetMenuAim>
    <li cdkMenuItem>Open</li>
  </ul>
</ng-template>

<li cdkMenuItem

[cdkMenuTriggerFor]="file">

File

</li>

</ul>

<ng-template #file>

</ul>

</ng-template>

hasHarnessy getHarnessOrNull en Component Test Harnesses

Angular 14 incluye métodos HarnessLoader para verificar si un harness está presente y devolver la instancia del harness si está presente. Los Component Test Harnesses continúan brindando una forma flexible de escribir mejores pruebas para tus componentes.


const loader = TestbedHarnessEnvironment
    .loader(fixture);

const hasButton = await loader
    .hasHarness(MatButtonHarness)

const buttonHarnessOrNull = await loader
    .getHarnessOrNull(MatButtonHarness);

const loader = TestbedHarnessEnvironment

.loader(fixture);

const hasButton = await loader

.hasHarness(MatButtonHarness)

const buttonHarnessOrNull = await loader

.getHarnessOrNull(MatButtonHarness);

Mejoras en Angular CLI

El análisis de argumentos de CLI estandarizado significa más consistencia en toda la CLI de Angular y ahora cada marca usa el formato –lower-skewer-case. Se ha eliminado la compatibilidad con argumentos obsoletos de camelCase y se agrego compatibilidad con el uso de alias combinados.

¿ Tienes curiosidad por lo que esto significa ? Ejecuta el comando ng –help para obtener una salida limpia que explique sus opciones.

Comando ng completion

Suele ocurrir a veces que en lugar de escribir el comando ng serve se escribe ng sevre. Los errores tipográficos son una de las razones más comunes por las que una línea de comandos arroja error. Para resolver esto, en Angular 14 se agrego el comando ng completion que presenta el autocompletado de escritura anticipada en tiempo real.

Para asegurarse de que todos los desarrolladores de Angular sepan esto, la CLI de Angular te pedirá que optes por autocompletar durante tu primera ejecución de comando en Angular 14. También puedes ejecutar manualmente el comando ng completion y la CLI lo configurará automáticamente.

Comando ng analytics

Este comando te permite controlar la configuración de análisis e imprimir información de análisis. Una salida más detallada comunica claramente tus configuraciones de análisis y proporciona al equipo de Angular datos de telemetría para informar la priorización de proyectos. ¡ Sinceramente ayuda mucho cuando lo activas !

Comando ng cache

Este nuevo comando proporciona una forma de controlar e imprimir información de caché desde la línea de comandos. Puedes habilitar, deshabilitar o eliminar del disco e imprimir estadísticas e información.

Angular DevTools Disponible Sin Conexión y en el Navegador Firefox

La extensión de depuración de Angular DevTools ahora admite el uso sin conexión, gracias a una contribución de la comunidad de Keith Li. Para usuarios de Firefox, buscar la extensión en Addons para Mozilla Firefox.

Compilaciones de Aplicaciones ESM Experimentales

Finalmente Angular 14 presenta un sistema de compilación experimental basado en esbuild para el comando ng build, que compila la salida ESM pura. Para probar esto en tu aplicación, actualiza el generador de navegador en tu archivo angular.json:


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

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

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

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

El equipo de Angular se complace en recopilar comentarios sobre el rendimiento de tu aplicación a medida que continuan agregando soporte para preprocesadores de hojas de estilo como Sass.

¿ Que Sigue ?

Junto con Angular 14, también se ha actualizado la hoja de ruta pública para reflejar el estado de los proyectos y exploraciones del equipo actuales y futuros. Puedes obtener más información sobre los planes futuros del equipo en el blog de Angular y en el State of Angular (Estado de Angular) de los próximos #GoogleIO y en el siguiente video del GoogleIO 2022:

El equipo de Angular agradece a todos los desarrolladores que les aportan, innovan y motivan para que ellos sigan adelante. ¡ El equipo está entusiasmado con el rumbo que tomará Angular !

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

Conclusión

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

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.