Como atualizar angular 5 para versão 6

Postado em: 05 Jun 2020

Setup

  • node: v12.16.3
  • npm: 6.14.4
  • @angular/cli: 1.7.0
  • @angular/core: 5.2.0
  • typescript: 2.5.3

Vamos utilizar como base, o guia de atualização do Angular. Antes que você pergunte o motivo desse post, se existe um guia, é devido a aparentemente o guia não cobrir alguns pontos da versão 5 para a 6, tive essa dificuldade e resolvi compartilhar aqui com vocês.

https://update.angular.io/#5.2:9.0

1. Antes de começar

De acordo com o guia, vamos nos certificar de utilizar o módulo HttpClientModule e o serviço HttpClient ao invés do depreciado HttpModule e Http service.

2. Upgrade do angular cli do projeto para versão 6

No guia, a recomendação seria:

$ npm install @angular/cli@6
$ ng update @angular/cli@6

Porém, notei que sem as flags, não há criação/migração dos arquivos que possibilitarão features como as libraries, então precisei rodar:

$ ng update @angular/cli --from=1.7.0 --migrate-only

Onde:

  • – from: representa a versão atual do seu angular cli antes de atualizar para a versão 6, que no meu caso, era a 1.7.0

Caso tudo ocorra da forma esperada, o resultado será algo semelhante à:

DELETE .angular-cli.json
CREATE angular.json (3683 bytes)
UPDATE karma.conf.js (962 bytes)
UPDATE src/tsconfig.spec.json (303 bytes)
UPDATE package.json (1418 bytes)
UPDATE tsconfig.json (407 bytes)
UPDATE tslint.json (2998 bytes)

3. Upgrade do angular core do projeto para versão 6

$ ng update @angular/core@6

4. Upgrade do angular material para versão 6 (Opcional)

Tentei rodar o comando, mas independente se seto a versão com @6, ele faz o update para a latest

$ ng update @angular/material

Com isso, contornei utilizando:

$ npm i @angular/material@6 @angular/cdk@6 --save

5. Lint do rxjs

Por fim, o guia nos instrui a rodar o comando do rxjs-lint para migração do lint

$ npm install -g rxjs-tslint
$ rxjs-5-to-6-migrate -p src/tsconfig.app.json

Referência

https://update.angular.io/

Projeto

https://github.com/heijimrt/angular-upgrade5-to-6

Os passos foram separados nas releases, espero que ajude, grande abraço!

Comentários