Angular 6: atualizando um projeto existente

Neste post irei ensinar como atualizar um projeto Angular existente da versão 5 para a versão 6.

Certifique-se de estar usando a versão 8 ou superior do NodeJS.

Caso queira saber mais sobre as principais novidades do Angular 6, escrevi um outro post falando a respeito.

Antes de mais nada…

Esse é o principal passo, recomendo que você inicialize um repositório git no seu projeto caso ainda não tenha feito, para que possamos trabalhar em um branch diferente para a atualização. Isso garante que se caso você tiver maiores problemas ainda consiga usar seu código antigo.

git init // somente se seu projeto ainda não tiver um repo git 
git add . // adiciona os arquivos para estágio de commit
git commit -m "codigo na versao 4" // faz commit do código atual
git checkout -b update-angular6 // criar novo branch e já faz checkout

Atualizando o Angular CLI

O primeiro passo é com o CLI, precisamos atualizá-lo globalmente e localmente, mas antes precisamos removê-lo:

npm uninstall -g @angular/cli

E então instalamos novamente (certifique-se de estar no diretório do seu projeto):

npm i -g @angular/cli@6 // global
npm i -D @angular/cli@6 // local

E vamos usar o ng update para migrar as configurações do CLI para o novo formato:

ng update @angular/cli

E com isso atualizamos as configurações do CLI.

[Opcional]:

git add .
git commit -m "update @angular/cli"

Verificando atualizações necessárias

Agora rode o ng update sem argumentos para ver tudo que ainda precisa ser atualizado:

ng update

Podemos atualizar um a um ou tentar todos de uma vez usando ng update --all , porém faremos um a um para garantir que não teremos maiores problemas.

Atualizando RxJS

Antes de podermos atualizar o @angular/core, precisaremos atualizar o rxjs porque senão receberemos uma mensagem de erro por conta de pacotes que usam a versão 5.x do RxJS.

Certifique-se também que seu projeto esteja usando a versão 5.5 do RxJS e que você já corrigiu qualquer problema causado por bug fixes até essa versão.

Vamos instalar o RxJS@6 e um pacote para garantir retro compatibilidade com o RxJS@5, ele deverá ser removido após a atualização que estamos fazendo, ou então caso alguma lib ainda dependa dele (no meu caso apollo-angular, ou angularfire2, etc), você vai precisar mantê-lo até que essa lib migre para o Angular e RxJS 6.

Instale o RxJS@6 e o rxjs-compat:

npm i -S rxjs@6 rxjs-compat@6

Feito isso iremos rodar um linter que irá refatorar o nosso código TypeScript para os padrões do RxJS@6:

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

Aguarde o procedimento, pode levar alguns minutos.

Depois que finalizar, teremos nosso código já refatorado!

[Opcional]:

git add .
git commit -m "update rxjs"

Atualizando @angular/core

Agora podemos finalmente atualizar o @angular/core, mas antes precisamos atualizar a versão do TypeScript por conta do @angular/compiler-cli:

npm i -D typescript@2.7.2 // use esta versão

E agora o @angular/core:

ng update @angular/core

Aguardo o procedimento, e então teremos os pacotes do angular atualizados para versão 6!

[Opcional]:

git add .
git commit -m "update @angular/cli"

Atualizando @angular/material (e outros)

No caso da minha aplicação, eu ainda preciso atualizar o Angular Material, se esse for o seu caso também, rode:

ng update @angular/material

Nesse passo ele vai criar um diretório dentro do projeto com um nome parecido com “angular_material_schematics-0khGW6”, onde serão colocados alguns recursos que serão usados durante a refatoração.

Uma mensagem ao final do procedimento pede para verificarmos por possíveis problemas que foram detectados mas não foram corrigidos automaticamente, faça essa checagem caso necessário.

Outro detalhe é que se ao final da execução ele não remover o diretório que foi criado, você pode removê-lo manualmente:

rm -rf angular_material_schematics-0khGW6

Feito isso temos o projeto já atualizado com o Angular Material v6 também!

[Opcional]:

git add .
git commit -m "update @angular/material"
git checkout master
git merge update-angular6 // faz merge dos branchs
git branch -d update-angular6 // deleta o branch que foi criado

Finalizando

Com todos os passos executados com sucesso, finalizamos a atualização do nosso projeto!

IMPORTANTE: caso nenhuma das bibliotecas de terceiros que estiver usando dependa do RxJS@5.x, você deve remover o rxjs-compat pois ele incrementa um pouco o tamanho final da aplicação. Para removê-lo é simples:

npm uninstall -S rxjs-compat

Caso depois de removê-lo obter algum erro por conta do RxJS, você pode mantê-lo até que lib se atualize para a v6 também. Basta instalar novamente.

Se tudo correu bem, basta rodar:

ng serve -o

E partir pro abraço!

Conclusão

O comando ng update se mostrou um recurso fantástico! Considero meu projeto de médio porte e a migração foi muito sutil, sem maiores problemas!

Claro que a biblioteca que você estiver usando precisa ter criado um “script” para rodar com os “Shematics” do Angular, para que as atualizações sejam feitas dessa forma “automática”. Esperamos que cada vez mais isso seja adotado pela comunidade, que só tem a ganhar!

Adicionalmente, a equipe do Angular disponibilizou uma “ferramenta” que detalha todos os passos para atualizar aplicações existentes, acesse em: https://update.angular.io/

E você, também conseguiu atualizar seu projeto? Teve algum problema? Sinta-se a vontade para deixar sua mensagem nos comentários!

Um grande abraço!

Links de referência:

Anúncio oficial do Angular 6:
https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

RxJS Migration Guide:
https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md#drop-compat