O Angular 9 já está disponível - Ivy chegou

Como atualizar para a versão 9

Hera

• Tamanhos menores de pacotes
• Teste mais rápido
• Melhor depuração
• Classe CSS aprimorada e ligações de estilo
• Verificação de tipo aprimorada
• Mensagens de erro de construção aprimoradas
• Tempo de construção aprimorado, AOT ativado por padrão
• Melhorando a internacionalização

Tamanhos menores de pacotes

• Pequenos aplicativos que não usam muitos dos recursos da estrutura podem se beneficiar mais com a criação de árvores.
• Grandes aplicações com muitos componentes podem se beneficiar de tamanhos reduzidos de fábrica.
• Os aplicativos de tamanho médio ficarão praticamente os mesmos, ou um pouco menores, pois se beneficiam menos com o corte de árvores e não usam muitos componentes para se beneficiar muito com fábricas menores.

Teste mais rápido

Depuração aprimorada

• Angular , .
• , applyChanges

Estilo aprimorado e classes 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>

Verificação de tipo aprimorada

• fullTemplateTypeCheck - ativar esse sinalizador informa ao compilador para verificar tudo em seu modelo (ngIf, ngFor, tp-template, etc.)
• strictTemplates - ativar esse sinalizador aplicará as regras mais rigorosas para verificação de tipo.

Erros de compilação corrigidos

Tempo de construção aprimorado, o compilador AOT é ativado por padrão.

Internacionalização aprimorada (i18n)

Atualização ng mais confiável

• Sempre use a versão mais recente da CLI. A partir da CLI 8.3.19, agora usamos a CLI da versão de destino da atualização. No futuro, as atualizações serão sempre processadas pela última CLI.
• Melhor progresso na atualização. Agora, ng update fornece mais informações sobre o que está acontecendo sob o capô. Para cada migração, você verá informações sobre isso.
• Depuração mais fácil de atualizações. Por padrão, ng update inicia todas as migrações e deixa as alterações cumulativas no disco para verificação. A atualização da versão 9 também apresenta um novo sinalizador --create-commits. Quando você executa ng update --create-commits, a ferramenta captura o estado da sua base de código após cada migração, para que você possa passo a passo fazer e depurar as alterações postadas no seu código.

Novos recursos "fornecidos"

• platform - fornecidoIn: a indicação 'platform' disponibiliza o serviço em um injetor de plataforma singleton especial, que é compartilhado por todos os aplicativos na página.
• any - fornece uma instância única para cada módulo (incluindo módulos preguiçosos)

Ligação de componente

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();
});

Novos componentes

• Você pode incorporar o player do YouTube em seu aplicativo com o novo player do youtube.
• Também apresentamos componentes do google-maps. Esses componentes facilitam a visualização do Google Maps, exibem marcadores e conectam a interatividade para que funcione como um componente angular regular, eliminando a necessidade de aprender a API do Google Maps.

Melhoria do IDE e do serviço de idiomas

• A gramática TextMate para sintaxe de modelo agora permite destacar a sintaxe nos modelos incorporados e externos
• Vá para Definição para templateUrl e styleUrls
• Informações sobre tipo e NgModule na dica de ferramenta

Suporte ao TypeScript 3.7