Angular 11

Bienvenidos y bienvenidas a la versión 11 de Angular

La versión 11.0.0 ya está aquí y tenemos algunas excelentes actualizaciones para los desarrolladores de Angular en todas partes. Esta versión tiene actualizaciones en toda la plataforma incluyendo el framework , el CLI y los componentes , ¡Vamos a adentrarnos en esta actualización!

¿Qué hay en esta versión?

Actualizaciones sobre la operación Byelog
Cuando compartimos la hoja de ruta de Angular , uno de los elementos fue la Operación Byelog, en la que nos comprometimos a realizar un esfuerzo de ingeniería significativo para resolver problemas y relaciones públicas hasta que tengamos una comprensión clara de las necesidades de la comunidad en general. ¡Ahora podemos informar que el objetivo original está completo! ,Hemos clasificado todos los problemas en los tres monorepos y continuaremos con esto como un esfuerzo continuo a medida que se informen nuevos problemas.

Este es nuestro compromiso: en el futuro, todos los problemas nuevos notificados se evaluarán en un plazo de dos semanas.

En el proceso, resolvimos algunos problemas populares en el enrutador y los formularios .

Además, ¡cerramos el tercer problema más popular !

Ahora, estamos planeando los próximos pasos para apoyar a la comunidad Angular. Continuaremos evaluando y solucionando problemas, y trabajaremos para mejorar nuestros procesos para aceptar contribuciones de la comunidad.

Inserción automática de fuentes

Para hacer que sus aplicaciones sean aún más rápidas al acelerar su first contentful paint, estamos introduciendo la inserción automática de fuentes. Durante el tiempo de compilación, Angular CLI descargará y alineará las fuentes que se utilizan y vinculan en la aplicación. Habilitamos esto de forma predeterminada en las aplicaciones creadas con la versión 11. ¡Todo lo que necesita hacer para aprovechar esta optimización es actualizar su aplicación!

Arneses de prueba de componentes

En Angular v9 presentamos los arneses de prueba de componentes. Los cuales proporcionan una superficie API robusta y legible para ayudar a probar los componentes de Angular Material. Ofrece a los desarrolladores una forma de interactuar con los componentes de Angular Material utilizando la API compatible durante las pruebas.

¡Lanzando con la versión 11, tenemos arneses para todos los componentes! Ahora los desarrolladores pueden crear conjuntos de pruebas más robustos.

También hemos incluido mejoras de rendimiento y nuevas API. La función paralela facilita el trabajo con acciones asincrónicas en sus pruebas al permitir a los desarrolladores ejecutar múltiples interacciones asincrónicas con componentes en paralelo. La función manualChangeDetection brinda a los desarrolladores acceso a un control más detallado de la detección de cambios al deshabilitar la detección automática de cambios en las pruebas unitarias.

Para obtener más detalles y ejemplos de estas API y otras características nuevas, asegúrese de consultar la documentación de los arneses de prueba de Angular Material.

Informes y registro mejorados

Hemos realizado cambios en los informes de la fase de construcción para que sean aún más útiles durante el desarrollo. Estamos incorporando nuevas actualizaciones de salida de CLI para facilitar la lectura de registros e informes.

Vista previa actualizada del servicio de idiomas

Angular Language Service proporciona herramientas útiles para que el desarrollo con Angular sea productivo y divertido. La versión actual del servicio de idiomas se basa en View Engine y hoy damos un adelanto del servicio de idiomas basado en Ivy. El servicio de idiomas actualizado proporciona una experiencia más potente y precisa para los desarrolladores.

Ahora, el servicio de lenguaje podrá inferir correctamente tipos genéricos en plantillas de la misma manera que lo hace el compilador de TypeScript. Por ejemplo, en la captura de pantalla a continuación podemos inferir que el iterable es de tipo string.

Esta nueva y poderosa actualización aún está en desarrollo, pero queríamos compartir una actualización mientras seguimos preparándola para un lanzamiento completo en una próxima versión.

Soporte actualizado de reemplazo de módulo en caliente (HMR)"Hot Module Replacement"

Angular ha ofrecido soporte para HMR, pero habilitarlo requería cambios de configuración y código, lo que lo hace menos que ideal para incluirlo rápidamente en proyectos Angular. En la versión 11, actualizamos el CLI para permitir la habilitación de HMR al iniciar una aplicación con ng serve. Para comenzar, ejecute el siguiente comando:

ng serve --hmr

Después de que el servidor local inicie lo último en la consola mostrará un mensaje confirmando que HMR está activo:

AVISO: El reemplazo de módulo en caliente (HMR) está habilitado para el servidor de desarrollo.

Consulte https://webpack.js.org/guides/hot-module-replacement para obtener información sobre cómo trabajar con HMR para webpack.

Ahora, durante el desarrollo, los últimos cambios en componentes, plantillas y estilos se actualizarán instantáneamente en la aplicación en ejecución. Todo sin necesidad de actualizar la página completa. Los datos escritos en formularios se conservan, así como la posición de desplazamiento, lo que aumenta la productividad del desarrollador.

Compilaciones más rápidas

Estamos brindando un ciclo de desarrollo y compilación más rápido al realizar actualizaciones en algunas áreas clave.

• Al instalar dependencias, el proceso de actualización de ngcc ahora es de 2 a 4 veces más rápido.
• Compilación más rápida con TypeScript v4.0.

Soporte Experimental Webpack 5

Ahora, los equipos pueden suscribirse al paquete web v5. Actualmente, puede experimentar con la federación de módulos . En el futuro, webpack v5 despejará el camino para:

• Compilaciones más rápidas con almacenamiento en caché de disco persistente
• Paquetes más pequeños gracias a cjs tree-shaking

El soporte es experimental y está en desarrollo, por lo que no recomendamos participar en usos de producción.

¿Quieres probar el paquete web 5? Para habilitarlo en su proyecto, agregue la siguiente sección a su archivo package.json:

"resoluciones": { 
     "paquete web": "5.4.0" 
}

Actualmente, deberá usar yarn para probar esto, ya que npm aún no admite la propiedad resolution.

Linting

En versiones anteriores de Angular, enviamos una implementación predeterminada para linting (TSLint). Ahora, TSLint está en desuso por los creadores del proyecto que recomiendan la migración a ESLint. James Henry, junto con otras personas de la comunidad de código abierto, desarrolló una solución de terceros y una ruta de migración a través de typescript-eslint , angular-eslint y tslint-to-eslint-config . Hemos estado colaborando estrechamente para garantizar una transición sin problemas de los desarrolladores de Angular a un stack de linting compatible.

Estamos desaprobando el uso de TSLint y Codelyzer en la versión 11. Esto significa que en versiones futuras la implementación predeterminada para linting proyectos Angular no estará disponible.

Dirígete a la página oficial del proyecto para obtener una guía para incorporar angular-eslint en un proyecto y migrar desde TSLint.

Limpieza interna

En esta actualización, eliminaremos la compatibilidad con IE9/IE10 e IE mobile. IE11 es la única versión de IE que aún es compatible con Angular. También eliminamos las API obsoletas y agregamos algunas a la lista de obsolescencia. Asegúrese de verificar esto para asegurarse de que está utilizando las API más recientes y siguiendo nuestras mejores prácticas recomendadas.

Ruta de Angular

También actualizamos la hoja de ruta para mantenerte informado sobre nuestras prioridades actuales. Algunos de los anuncios en esta publicación son actualizaciones sobre proyectos en progreso de la hoja de ruta. Esto refleja nuestro enfoque para implementar esfuerzos mayores de manera incremental y permite a los desarrolladores proporcionar comentarios tempranos que podemos incorporar en la versión final.

Colaboramos con Lukas Ruebbelke de la comunidad Angular en la actualización del contenido de algunos de los proyectos para reflejar mejor el valor que brindan a los desarrolladores.

Cómo actualizar para obtener la versión 11

Cuando estés listo para actualizar ejecuta este comando para actualizar Angular y el CLI:

ng update @angular/cli@angular/core

Dirígete a update.angular.io para encontrar información detallada y orientación sobre la actualización. Siempre recomendamos actualizar una versión importante a la vez para tener la mejor experiencia de actualización.

Esperamos que disfrute de esta actualización de funciones y asegúrese de hacernos saber lo que piensa aquí o en Twitter .

Artículo original en inglés : Aquí
Escrito por: Mark Techson en Angular Blog