Angular 8 — Atualização e Recursos

Image for post
Image for post

Foi lançado no dia 28 de maio a versão estável 8 do Angular.

Neste artigo eu comento sobre as principais novidades e os passos para atualização.

Atualização

ng update @angular/cli @angular/core

Novos Recursos

Differential Loading by Default

De acordo com a página https://web.dev/codelab-serve-modern-code, esse recurso é um processo em que o navegador escolhe entre JavaScript moderno ou legado com base em seus próprios recursos, tiramos vantagem disso por padrão, executando uma compilação moderna (es2015) e uma compilação herdada (es5) de seu aplicativo.

Ao utilizar o comando ng update o próprio CLI se encarrega de atualizar o tsconfig. Isso na prática pode gerar uma economia superior a 40kB do tamanho inicial do pacote para os navegadores modernos.

Image for post
Fonte: https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

Para saber mais, acesse a documentação em https://v8.angular.io/guide/deployment#differential-loading

Configurações de Rotas

Para realizar a configuração escrevíamos da seguinte maneira:

{path: ‘/painel, loadChildren:‘./painel/painel.module#PainelModule’}

Com a versão 8, temos as importações dinâmicas,

Agora ficou assim:

path: `/painel`, loadChildren: () => import(`./painel/painel.module`).then(m => m.PainelModule)}

Outra vantagem dessa forma está no suporte de editores (VSCode, WebStorm) em validar os imports para o programador.

Da mesma forma, o legal de utilizar o ng update é atualização das rotas seguindo esse formato novo.

CLI Builders

ng add @angular/fireng run minha-aplicacao:deploy

Uma vez instalada com ng add, o comando realiza a construção e implantação no Firebase.

ViewChild e ContentChild

Antes:

@ViewChild('foo') foo: ElementRef;

Depois:

@ViewChild('foo', {static: true}) foo: ElementRef;

BREAKING CHANGES

Depreciada desde a versão 4 do framework, para requisições HTTP o correto é utilizar o pacote @angular/common/http .

Caso tenha alguma aplicação que ainda utilize esse pacote, você deve atualizar sua aplicação realizando os seguintes passos:

  • Alterar HttpModule para HttpClientModule (do pacote @angular/common/http) em cada módulo;
  • Trocar o Http no service para HttpClient no service.
  • Remover todas ocorrências de chamadas map(res => res.json()).

Conclusão

Atualizei alguns projetos e foi bem tranquilo!!!

Até +

Links Consultados

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store