Angular 6 acaba de ser lançado, embora a quantidade de novas features seja mínima, as grandes novidades ficaram por conta das features do cli. As novas features irão facilitar a atualização e adicionar novas bibliotecas aos aplicativos com um esforço minimo, sem passos adicionais. Neste artigo iremos abordar sobre essas novas ferramentas e como fazer para atualizar seu aplicativo de Angular 5 para 6.

Novos comandos do cli

O Angular CLI tem dois novos comandos, update e add.

ng update

ng update <package> irá analisar o packages.json e utilizar uma base de conhecimento do próprio Angular para recomendar os updates.
Além disso as bibliotecas agora poderão ter um script de update, chamado schematics. Se algumas das dependências do projeto possuir em schematic, poderá ser feito o update automaticamente. Facilitando o processo e prevenindo bugs ou quebrar o build.

ng add

De forma semelhante vai funciona o ng add, permitindo adicionar novas bibliotecas ao projeto. Podemos dar como exemplo o ng add @angular/material, anteriormente para adicionar esta referência era necessário além do npm install, alguns passos adicionais para configurar. Agora com estes simples comandos estes passos adicionais ficaram a cargo do schematics

arquivo de configuração

Agora projetos Angular possuem um novo arquivo de configuração chamado angular.json, deixando para trás o .angular-cli.json.

ng new

O ng new pode gerar workspaces. Novos apps podem ser adicionados, sendo possível ter múltiplas apps sob um projeto.

Suporte para Typescript 2.7

O Angular agora dá suporte ao typescript 2.7

RxJS 6

O Angular traz consigo o RxJS 6. Que por sua vez teve duas grandes modificações se comparado ao RxJS 5.

Estrutura interna diferente, que requer modificações no import.
mudanças no pipe().

Mais detalhes sobre as mudanças do RxJS confira nas referências.

Ivy

O Ivy não está disponível nessa versão. Muito se falou do Ivy no ng-conf. Para quem não sabe o Ivy será a nova geração do renderizador do Angular. A equipe do Angular diz que haverá significantes benefícios com a chegada dele. Será menor, mais rápido e mais simples que o atual. Será possível fazer um hello-word com apenas 3.2kb

Atualizando

A equipe da Angular criou o Angular Update Guide, para facilitar a migração para o Angular 6. Grande parte dos projetos, esta ferramenta dará conta da atualização.

Ainda assim, abaixo uma análise resumida das etapas necessárias para atualizar um app Angular 5.2 com Angular Material para o Angular 6

Atualizar manualmente

Primeiro precisamos atualizar o cli para a versão 6, global e localmente.

$ npm i -g @angular/cli
$ npm i @angular/cli

$ yarn global add @angular/cli
$ yarn add @angular/cli

Rodando o ng update

Agora pode executar o ng update, para o Angular e o Material.

ng update @angular/cli

Atualizando o CLI converterá o arquivo .angular-cli.json para o novo formato angular.json. Além de atualizar várias configurações do projeto.

Em seguida, execute a atualização para os pacotes principais angulares:

ng update @angular/core

E então você também pode executar a atualização para atualizar o Material Angular e o RxJS:

ng update @angular/material
ng update rxjs

Gostou? Duvidas? Dicas? Deixe uma mensagem, vamos bater um papo!