Angular 11: todo lo que necesita saber

La versión 11 de Angular está aquí y ha traído algunas actualizaciones excelentes para los desarrolladores. Desde el marco hasta los componentes y la CLI: todo está actualizado. El equipo de Angular intenta traer algunos cambios importantes con cada actualización. Por ejemplo, iVY se lanzó en Angular 9, el soporte para Typescript 3.8 se proporcionó en Angular 9.1 y las modificaciones en la biblioteca de componentes de la interfaz de usuario de Angular Material se presentaron en Angular 10. Hoy exploraremos las características de Angular 11. Profundicemos después.

Angular 11: características y actualizaciones

Lo más destacado de esta versión son los tipos más estrictos, la inserción automática de fuentes y las mejoras en el rendimiento del enrutador. La inserción de fuente automática predeterminada se habilitará para las aplicaciones que se actualicen. El rendimiento mejorado del enrutador asegura que las aplicaciones se hagan más rápido. Además de estos, hay más en Angular 11 que enumeraremos a continuación.

#Arneses de prueba de componentes

En la versión 9 de Angular, la comunidad introdujo Arneses de prueba de componentes. Estos proporcionaron una superficie API robusta para ayudar en las pruebas de componentes de material angular. Permite al desarrollador interactuar con los componentes utilizando la API compatible.

En la versión 11, hay disponible un arnés de componentes para cada componente. Viene con muchas mejoras de rendimiento, actualizaciones e incluso nuevas API. Ahora, la función paralela facilita el manejo de acciones asíncronas dentro de las pruebas, ya que los desarrolladores pueden ejecutar múltiples interacciones asíncronas con los componentes en paralelo. Por ejemplo, una función de detección de cambio manual dará acceso a un mejor control de la detección simplemente deshabilitando las detecciones de cambio automático dentro de las pruebas de la unidad.

#Soporte de reemplazo de módulo activo actualizado

Hot Module Replacement o HMR es un mecanismo que permite reemplazar los módulos sin actualizar un navegador completo. Este es un concepto antiguo, pero Angular 11 le agrega más.

Angular 11 ofrece soporte para HMR con cambios de código y configuraciones requeridas. Permite que la CLI habilite HMR al iniciar una aplicación con ng serve. Se requiere el siguiente comando para comenzar:

ng servir –hmr

Por lo tanto, el comando CLI reduce significativamente la cantidad de esfuerzo necesario para configurar el HMR. Una vez que los desarrolladores insertan este comando, la consola mostrará un mensaje tan pronto como el servidor local confirme que HMR está activo.

Durante el desarrollo, los últimos cambios en plantillas, estilos y componentes se actualizarán automáticamente en la aplicación en ejecución. No requiere una actualización de página completa, lo que a su vez aumenta la productividad de los desarrolladores.

#Vista previa actualizada del servicio de idiomas

Angular Language Service ofrece varias herramientas útiles que, según los profesionales de cualquier empresa de desarrollo de sitios web, garantizan un desarrollo web sin complicaciones. El servicio de idioma actualizado proporcionará una experiencia más precisa a los desarrolladores. Pueden ver una vista previa de cómo funcionarán las cosas con un mejor renderizador y motor de visualización. El servicio de lenguaje podrá inferir correctamente tipos genéricos en plantillas tal como lo hace el compilador de TypeScript.

#Inserción automática de fuentes

Angular 11 ofrece una inserción automática de fuentes que ayuda a convertir los íconos y fuentes de Google en línea en el índice HTML. Durante la compilación, Angular CLI descargará y, en consecuencia, incrustará las fuentes en línea que están vinculadas y se utilizan en la aplicación. Estos están habilitados por defecto para la configuración.

Esto está predeterminado en las aplicaciones creadas con la versión 11. Por lo tanto, para aprovechar las ventajas de esta optimización, los desarrolladores primero deben actualizar la aplicación.

#Soporte Webpack 5

Webpack se usa para compilar muchos archivos en un solo archivo o paquete pequeño. Su última versión, Webpack 5, se lanzó hace unos meses.

Angular 11 ofrece soporte experimental para webpack 5 y los desarrolladores pueden usarlo para probar cosas nuevas. El equipo de Angular puede extender el soporte experimental para lograr paquetes más pequeños y compilaciones más rápidas una vez que el paquete web se vuelva más estable.

Aquí está el comando para usar webpack 5. Agregue las siguientes líneas al archivo package.json:

“resoluciones”: {
“paquete web”: “5.4.0”
}

#Cambiar a ESLint

TSLint ha sido una de las herramientas de listado más populares utilizadas y recomendadas por los proveedores de servicios de desarrollo Angular. Recientemente, el deber se entrega a ESLint.

Con Angular 11, Codelyzer y TSLint están oficialmente en desuso y se eliminarán en futuras versiones. La última versión ha introducido un método de 3 pasos para migrar de TSLint a ESLint:

Paso 1 – Ejecutar ng add @angular-eslint/schematics
Paso 2: ahora, ejecuta el comando ng g @angular/schematics:convert-tslint-to-eslint {{TU NOMBRE DE PROYECTO}}
Paso 3: elimine el tslint.json de nivel raíz.

#Construcciones más rápidas

Angular 11 trae mejoras de velocidad radicales. El proceso de actualización de NGCC ahora es de 2 a 4 veces más rápido que antes. Por lo tanto, los desarrolladores no necesitan pasar mucho tiempo esperando para completar compilaciones y reconstrucciones.

#Compatibilidad con TypeScript 4.0

Angular 11 es compatible con TypeScript 4.0. El soporte para TypeScript 3.9 ahora se ha eliminado. Una de las razones principales detrás de esto es mejorar la velocidad de las compilaciones. La última versión garantiza compilaciones más rápidas y fluidas que las versiones anteriores.

#Mejor registro e informes

La última versión de Angular ha traído varios cambios a los informes de la fase de creación que lo hacen más útil durante el desarrollo. La salida de CLI incluye información más fácil de usar y legible.

#Otros cambios

Además de los mencionados anteriormente, la última versión de Angular trae varios otros cambios como:

• Mejoras en los trabajadores de servicio
• Nuevos esquemas y migraciones automatizados
• Soporte de carga diferida para varios puntos de venta con nombre
• Se elimina por completo la compatibilidad con Internet Explorer 9,10 y la compatibilidad con dispositivos móviles de IE.
• preserveQueryParams se elimina en el enrutador. En su lugar, los desarrolladores pueden usar queryParamsHandling=”preserve”
• Los tipos más estrictos ahora se construyen en tuberías
• CLI angular puede generar guardias de resolución
• La función formatDate admite el formato de año de numeración de semana ISO 8601
• Las expresiones dentro de las UCI ahora se verifican de nuevo.
• La canalización asíncrona ya no devuelve indefinido para ninguna entrada que se haya escrito como indefinida.

Cómo actualizar a Angular 11

Puede contratar desarrolladores de Angular para actualizar su aplicación a Angular 11. Los desarrolladores deben ejecutar el siguiente comando:

ng actualizar @angular/cli @angular/core

¿Encontró el artículo útil? Comparte con tus conocidos y cuéntales todo sobre Angular 11.