Angular 9 ya está disponible: Ivy ha llegado

Cómo actualizar a la versión 9

Hiedra

• Tamaños de paquete más pequeños
• Pruebas más rápidas
• La mejor depuración
• Enlaces de clase y estilo CSS mejorados
• Comprobación de tipo mejorada
• Mensajes de error de compilación mejorados
• Tiempo de construcción mejorado, AOT habilitado por defecto
• Mejorando la internacionalización

Tamaños de paquete más pequeños

• Las aplicaciones pequeñas que no utilizan muchas de las características del marco pueden beneficiarse más del movimiento de árboles.
• Las aplicaciones grandes con muchos componentes pueden beneficiarse de los tamaños reducidos de fábrica.
• Las aplicaciones de tamaño mediano se volverán más o menos iguales, o un poco más pequeñas, ya que se benefician menos del corte de árboles y no usan muchos componentes para beneficiarse en gran medida de las fábricas más pequeñas.

Pruebas más rápidas

Depuración mejorada

• Angular , .
• , applyChanges

Estilo mejorado y clases CSS.

<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>

@Component({
  host: {
    style: "color:blue"
  },...
})
...

@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
...

<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var( - -main-border-color)">hi</p>
</div>

Comprobación de tipo mejorada

• fullTemplateTypeCheck: habilitar este indicador le dice al compilador que verifique todo en su plantilla (ngIf, ngFor, tp-template, etc.)
• strictlyTemplates: la activación de este indicador aplicará las reglas más estrictas para la verificación de tipos.

Errores de compilación corregidos

Tiempo de compilación mejorado, el compilador AOT está habilitado de forma predeterminada.

Internacionalización mejorada (i18n)

Actualización más confiable de ng

• Utilice siempre la última versión de la CLI. A partir de 8.3.19 CLI, ahora usamos la CLI de la versión de destino de la actualización. En el futuro, las actualizaciones siempre serán procesadas por la última CLI.
• Mejor actualización de progreso. ng update ahora brinda más información sobre lo que sucede debajo del capó. Para cada migración, verá información al respecto.
• Depuración más fácil de actualizaciones. De forma predeterminada, ng update inicia todas las migraciones y deja los cambios acumulativos en el disco para su verificación. La actualización de la Versión 9 también presenta una nueva bandera: crear-commits. Cuando ejecuta ng update --create-commits, la herramienta captura el estado de su base de código después de cada migración, para que pueda realizar y depurar paso a paso los cambios que se publican en su código.

Nuevas características "provideIn"

• platform - ProvideIn: la indicación 'plataforma' hace que el servicio esté disponible en un inyector especial de plataforma única, que es compartido por todas las aplicaciones en la página.
• any: proporciona una instancia única para cada módulo (incluidos los módulos diferidos)

Enlace de componentes

it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const selectTrigger = fixture.debugElement.query(
    By.css(".mat-select-trigger")
  );
  selectTrigger.triggerEventHandler("click", {});
  fixture.detectChanges();
  await fixture.whenStable();
  const options = document.querySelectorAll(".mat-select-panel mat-option");
  options[1].click(); // Click the second option, "Bug".
  fixture.detectChanges();
  await fixture.whenStable();
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

Nuevos componentes

• Puede incrustar el reproductor de YouTube en su aplicación con el nuevo reproductor de YouTube.
• También presentamos componentes de google-maps. Estos componentes facilitan la visualización de Google Maps, mostrar marcadores y conectar la interactividad para que funcione como un componente angular regular, eliminando la necesidad de aprender la API de Google Maps.

IDE y mejora del servicio de idiomas

• La gramática de TextMate para la sintaxis de plantillas ahora le permite resaltar la sintaxis tanto en plantillas incrustadas como externas.
• Vaya a Definición para templateUrl y styleUrls
• Información de tipo y NgModule en la información sobre herramientas

Soporte de TypeScript 3.7