La versión 9 de Angular ya está disponible. ¡El Proyecto Hiedra ha llegado!

¡La versión 9.0.0 de Angular está aquí! Esta es una versión importante que abarca toda la plataforma, incluyendo el marco, el material Angular y el CLI. Esta versión cambia las aplicaciones al compilador Ivy y al tiempo de ejecución por defecto, e introduce formas mejoradas de probar los componentes.

Esta es una de las mayores actualizaciones de Angular que hemos hecho en los últimos 3 años, y estamos entusiasmados por todas las formas en que permite a los desarrolladores construir mejores aplicaciones y contribuir al ecosistema de Angular.

Cómo actualizar a la versión 9

Visite update.angular.io para obtener información detallada y orientación. Para tener la mejor experiencia de actualización, le recomendamos que primero actualice la versión final de Angular 8.
Primero, actualice a la última versión de 8

ng update @angular/cli@8 @angular/core@8

Luego, actualizar a 9

ng update @angular/cli @angular/core

Para revisar los cambios clave con esta actualización, incluyendo los APIs obsoletos, vea Actualización a la versión 9 de Angular en la documentación de Angular.

Hiedra

La versión 9 mueve todas las aplicaciones para usar el compilador y el tiempo de ejecución de Ivy de forma predeterminada. Además de los cientos de correcciones de errores, el compilador y el tiempo de ejecución de Ivy ofrecen numerosas ventajas:

  • Tamaños de bultos más pequeños
  • Pruebas más rápidas
  • Mejor depuración
  • Mejorada la clase de CSS y la vinculación de estilos
  • Comprobación de tipo mejorada
  • Errores de construcción mejorados
  • Mejora de los tiempos de construcción, habilitando el AOT por defecto
  • Mejoramiento de la internacionalización

Aquí hay un desglose de algunas de las mejoras más notables.

Tamaños de bultos más pequeños

El compilador de Hiedra ha sido diseñado para remover partes del Angular que no están siendo usadas por medio de sacudidas de árboles y para generar menos código para cada componente del Angular.
Con estas mejoras, las pequeñas y grandes aplicaciones pueden ver los ahorros de tamaño más dramáticos.

  • Las pequeñas aplicaciones que no usan muchas características angulares pueden beneficiarse más de la sacudida de los árboles.
  • Las grandes aplicaciones con muchos componentes pueden beneficiarse más del reducido tamaño de la fábrica.
  • Las aplicaciones de tamaño medio deberían ver paquetes de tamaño igual o ligeramente más pequeños, ya que se benefician menos de las sacudidas de los árboles y no tienen suficientes componentes para aprovechar realmente las fábricas más pequeñas.

Las aplicaciones pequeñas podrían ver alrededor de un 30% de disminución en el tamaño del paquete, las grandes verán una disminución de 25-40%, y las medianas disminuirán mínimamente.

Pruebas más rápidas

También hemos renovado la implementación del TestBed en Ivy para hacerlo más eficiente.
Anteriormente, TestBed recompilaba todos los componentes entre la ejecución de cada prueba, sin importar si había algún cambio en los componentes (por ejemplo, a través de anulaciones).
En Ivy, TestBed no recompila los componentes entre las pruebas a menos que un componente haya sido anulado manualmente, lo que le permite evitar la recompilación entre la gran mayoría de las pruebas.
Con este cambio, las pruebas de aceptación del núcleo del marco son alrededor de un 40% más rápidas. Esperábamos que los usuarios vieran que la velocidad de las pruebas de su propia aplicación era alrededor de un 40-50% más rápida.

Mejor depuración

Ivy te proporciona más herramientas para depurar tus aplicaciones. Cuando se ejecuta una aplicación en modo de desarrollo con el tiempo de ejecución de Ivy, ahora ofrecemos el nuevo objeto ng para la depuración.

  • Puedes pedirle a Angular acceso a instancias de tus componentes, directivas y más
  • Puedes llamar manualmente a los métodos y actualizar el estado
  • Cuando quieras ver los resultados de la detección de cambios, puedes activar la detección de cambios con applyChanges


Ivy también mejora el rastreo de la pila para depurar problemas como el error de ExpressionChangedAfterItHas BeenChecked. Anteriormente, el rastro de la pila podía ser inútil:


Con Ivy, se ve un rastro de pila más útil que permite saltar directamente a la instrucción de la plantilla con la expresión que ha cambiado.


Por ejemplo, si se hace clic en AppComponent_Template en el trazado de la pila de arriba, se puede ver la línea específica del código generado donde se está lanzando el error:

Si te sientes inclinado, también puedes entrar en cualquiera de estas instrucciones del marco para ver cómo el marco crea o actualiza tus componentes.

Mejorada la clase de CSS y la vinculación de estilos

El compilador y el tiempo de ejecución de Ivy proporcionan mejoras en los estilos de manejo. Anteriormente, si una aplicación contenía definiciones que competían por un estilo, esos estilos se reemplazaban destructivamente entre sí. Con Ivy, los estilos se fusionan de forma predecible.
Considere los siguientes fragmentos de plantillas y componentes:
Anteriormente, la última encuadernación evaluada ganaría, y esto podría depender del momento en que se produzcan cambios en estas expresiones. Si tanto miColor como miOtroColor estuvieran indefinidos, el estilo estático ‘rojo’ sería ignorado.
Con la versión 9, puede manejar sus estilos a través de un orden de precedencia claro y consistente que no depende del tiempo. Los estilos más específicos siempre tienen la mayor precedencia. Por ejemplo, un enlace a [style.color] anula un enlace conflictivo a [style].
Sin embargo, por razones de compatibilidad con el pasado, hemos dejado el comportamiento de los enlaces de [ngStyle] y [ngClass] igual que antes. Cuando sus valores de enlace se actualizan, los nuevos valores anulan los enlaces que compiten entre sí.
Puedes leer más sobre las reglas de precedencia de estilo en la guía de Sintaxis de Plantillas en la documentación.
Como efecto secundario de la refactorización del estilo, ahora también puedes vincularte a las propiedades personalizadas de CSS (también conocidas como variables CSS).

Comprobación de tipo mejorada

El compilador angular puede comprobar más de los tipos de su aplicación, y puede aplicar reglas más estrictas. Estas características te ayudarán a ti y a tu equipo a detectar errores en una etapa temprana del proceso de desarrollo.
Soportamos dos banderas principales para comprobaciones de tipos adicionales además de la predeterminada:

  • fullTemplateTypeCheck – Activar esta bandera le dice al compilador que compruebe todo dentro de su plantilla (ngIf,
Categorías Blog