Angular 10: lo que debe saber al respecto

Angular lanzó recientemente una nueva versión el 24 de junio de 2020. Se lanzó solo después de 4 meses de lanzar la versión 9.0 de Angular. El último Angular 10 es una versión beta, lo que significa que el equipo de Angular se acerca al lanzamiento final de la última versión de este marco orientado a mecanografiado y desarrollado por Google.

Si usted es un desarrollador web o alguien que busca desarrollar una aplicación web para su negocio, debe saber lo que esta nueva versión tiene para ofrecer. Dado que la versión beta se implementa dentro de los 4 meses posteriores al lanzamiento de la última versión, es posible que se pregunte si es un éxito o un fracaso. Estamos aquí para ayudarte a encontrar la respuesta. Echemos un vistazo más de cerca a las características clave de Angular 10.

Características de Angular 10

Aunque el equipo de Angular ha sostenido que la última versión se centrará principalmente en las herramientas de calidad y el ecosistema en lugar de introducir una plétora de nuevas características, hemos realizado un estudio extenso y le presentamos una lista completa de las ofertas de valor que puede esperar de la versión. . Comprobémoslo entonces.

• Nuevo selector de rango de fechas

La biblioteca de componentes de la interfaz de usuario de material angular ahora está equipada con un nuevo selector de rango de fechas. ¿No estoy seguro de lo que es? Se puede adjuntar un selector de rango de fechas a las páginas web. Muestra calendarios para seleccionar horas, fechas o cualquier período de tiempo predefinido como "últimos 20 días".

Si desea que sus usuarios seleccionen un rango de fechas en lugar de una sola fecha, puede usar los componentes mat-date-range-picker y mat-date-range-input.

• Configuraciones más estrictas opcionales

Angular 10 tiene una configuración de proyecto más estricta al crear un nuevo espacio de trabajo con ng new. Una vez que habilite este indicador, introducirá algunas configuraciones nuevas en su proyecto, como mejorar la capacidad de mantenimiento, permitir que la CLI realice una optimización avanzada en su aplicación, ayudar a detectar errores antes de tiempo, etc.

Aquí hay un alcance de trabajo básico de la bandera estricta:

-Cambio de verificación de tipo de plantilla a Estricto
-Habilitación estricta más en TypeScript
-Configuración de reglas de linting para evitar el uso de "cualquiera" como declaración de tipo
-Reducción de los presupuestos de paquetes predeterminados

• Advertencias sobre las importaciones de CommonJS

El uso de una dependencia empaquetada con CommonJS hace que los paquetes sean grandes y, por lo tanto, ralentiza la aplicación. Angular 10 advierte a los desarrolladores una vez que una compilación incluye uno de esos paquetes. De esa manera, pueden informar a sus dependencias que preferirían un paquete de módulos ECMAScript (ESM).

• Actualizaciones

Se han llevado algunas actualizaciones importantes a las dependencias de Angular para sincronizar con el ecosistema de JavaScript. Estos son los siguientes:

-TypeScript se actualiza a TypeScript 3.9. Ayuda al equipo a trabajar para mejorar el rendimiento y la estabilidad.
-TSLint se actualiza a v6
-TSLib se actualiza a v2.0

El diseño del proyecto también se ha actualizado. Por lo tanto, puede ver un nuevo archivo tsconfig.base.json en Angular 10. Este archivo admite mejor los IDE, el tipo de resolución de herramientas de compilación y las configuraciones de paquetes.

Aparte de estos, la última versión de Angular permite cosas como acelerar el compilador, editar experiencias, correcciones rápidas y finalizaciones.

• Rendimiento mejorado de ngcc

Esta función de Angular 10 promueve la implementación de un buscador de puntos de entrada basado en programas. Esto puede procesar los puntos de entrada a los que solo pueden llegar los programas definidos por un archivo tsconfig.json. Además, las dependencias están ocultas dentro de la exhibición del punto de entrada y se pueden leer sin tener que calcularlas cada vez.

No es necesario almacenar en el archivo la ruta base de cada paquete junto con los puntos de entrada. Por lo tanto, las aplicaciones no necesitan almacenar matrices vacías innecesarias. Esta función ayuda a manifestar y reducir el tamaño del archivo en el punto de entrada, incluso para los módulos de nodos grandes. Esto aumenta significativamente el rendimiento.

• Combinar varios archivos

La última versión de Angular admite la combinación de múltiples documentos de traducción sin problemas. En las versiones anteriores, estos podían cargar solo un archivo. Ahora los usuarios pueden especificar varios documentos por configuración regional y las transacciones de todos los archivos se pueden fusionar mediante un ID de mensajería. El documento más esencial se colocará en primer lugar y las traducciones alternativas más adelante.

• Tiempo de espera de bloqueo asíncrono

Otro aspecto interesante de Angular 10 es que el tiempo de espera de bloqueo asíncrono está configurado en esta versión. Esto admite el archivo ngcc.config.js para ajustar los retrasos de reintento y los reintentos en AsyncLocker. Una prueba de integración permite a los desarrolladores monitorear el tiempo de espera, usar el archivo ngcc.config.js para reducir el tiempo de espera y evitar que la prueba tome mucho tiempo. ¡No es de extrañar que los profesionales de las empresas de desarrollo de aplicaciones web reciban con gran alivio la última versión de Angular!

• enrutador

El protector CanLoad puede volver a UrlTree en la última versión de Angular. El guardia CanLoad que devuelve UrlTree anula cualquier navegación de vanguardia y, a su vez, ayuda a redirigir. Esto coincide con el comportamiento actual con los protectores CanActivate disponibles; estos también se agregan aquí. Sin embargo, esto no produce ningún impacto en la precarga.

• Compilar

Ahead-of-Time (AOT) compila una aplicación y sus bibliotecas en el momento de la compilación. Esta es una práctica común desde Angular 9. Puede convertir los códigos durante el tiempo de compilación incluso antes de que el navegador descargue y luego ejecute ese código. Naturalmente, esto asegura una representación más rápida en el navegador. El compilador elimina las solicitudes AJAX separadas para los archivos de origen insertando plantillas HTML externas y hojas de estilo CSS dentro del JavaScript de la aplicación.

Hay algunos cambios evidentes realizados en el AOT en Angular 10:

1. Su compilación incremental ayuda a alcanzar mejores tiempos de compilación
2. Con un código generado altamente compatible con la sacudida de árboles, puede alcanzar mejores tamaños de construcción
3. La versión le permite explorar varias características nuevas como la carga diferida del componente en lugar de módulos, metaprogramación o componentes de orden superior, el último sistema de detección de cambios que no está basado en Zone.js, etc.

• Error corregido

En esta versión, se han realizado varias correcciones de errores. Estos incluyen eliminar cualquier instancia no direccionada del rango en el compilador, resolver errores relacionados con la migración al importar un símbolo inexistente, identificar los módulos afectados por anulaciones en TestBed y otros. Además, también hay una solución en el núcleo para corregir el error Terser Inlining.

• Mejor compromiso comunitario

Angular ya cuenta con una gran comunidad global de desarrolladores que brinda constantemente ofertas de valor para los proyectos de Angular en todo el espectro. Recientemente, la propia organización planea adoptar estrategias y realizar una inversión para impulsar a la comunidad y mejorar aún más la plataforma.

• Desaprobaciones y eliminaciones

El formato de paquete angular ya no incluye paquetes FESM5 o ESM5. Esto le permite ahorrar 119 MB de tiempo de descarga e instalación mientras ejecuta yarn o npm install en bibliotecas y paquetes de Angular. Estos formatos se pueden descartar, ya que cualquier reducción de nivel para ayudar a ES5 se lleva a cabo al final del proceso de desarrollo.

Además, la organización Angular ha descartado cualquier soporte para navegadores más antiguos como IE9, 10 e Internet Explorer Mobile.

• Otros cambios

Angular 10 trae algunos cambios innovadores. Por ejemplo, Logic se actualiza en correspondencia con el formato de los períodos de días que se extienden más allá de la medianoche. Si su aplicación usa formatDate o DatePipe o incluso los códigos de formato b y B, se verá afectada por este cambio.

Otro cambio es que cualquier resolución que devuelva VACÍO cancelará la navegación. Los desarrolladores tienen que actualizar los resolutores con algún valor específico como ¡predeterminado! Vacío.

Angular NPM no contiene algunos comentarios jsdoc para admitir las optimizaciones avanzadas de Closure Compiler. Aquellos que usan Closure Compiler deberían consumir mejor los paquetes Angular creados directamente a partir de las fuentes en lugar de consumir las versiones publicadas en NPM. Por un tiempo temporal, los usuarios pueden usar su canalización de compilación actual.

En esta versión, los encabezados Vary se pasan por alto durante la recuperación de las fuentes de las cachés de ServiceWorker. Esto da como resultado la recuperación de las fuentes incluso si sus encabezados no son similares. Si una aplicación tiene que diferenciar sus respuestas en función de los encabezados de solicitud, asegúrese de que Angular ServiceWorker esté configurado para evitar el almacenamiento en caché de cualquier recurso afectado.

Las advertencias sobre elementos desconocidos ahora se notan como errores. Esto no interrumpirá su aplicación, pero puede activar herramientas que esperan registrarse a través de console.error.

Cómo actualizar a Angular 10

Para actualizar a la última versión de Angular, puede usar el siguiente comando:

ng actualizar @angular/cli @angular/core

Aquí hay una guía definitiva sobre la actualización a la versión 10 de Angular. Sin embargo, sin experiencia técnica, el comando puede no ser útil. Contrate los servicios profesionales de desarrollo de Angular para actualizar con éxito a Angular 10.

Conclusión
Toda la comodidad que ofrece Angular 10 quizás lo convenció de actualizar la versión del marco de su aplicación. Confía en nosotros, vale la pena el esfuerzo.