Os desafios de atualizar o Angular da versão 12 para a 17 em um monorepo Nx
#angular#nx#javascript#frontend
Henrique Almeida

Henrique Almeida @henriquealmeida

Joined:
Apr 4, 2022

Os desafios de atualizar o Angular da versão 12 para a 17 em um monorepo Nx

Publish Date: Aug 18
0 0

Atualizar dependências de um workspace para versões recentes pode parecer uma tarefa simples à primeira vista. Mas, quando falamos de um monorepo Nx com múltiplos apps, bibliotecas compartilhadas, uma base de código considerável e várias major versions para atualizar, na prática, a tarefa se torna desafiadora — até mesmo para equipes experientes.

Neste artigo, compartilho a jornada de atualização do Angular 12 para o 17 em um monorepo Nx, destacando os principais desafios enfrentados, decisões tomadas e lições aprendidas.

Razões para atualizar

Embora não seja possível expor razões estratégicas internas, algumas motivações comuns para atualizações desse tipo incluem:

  • Compatibilidade com bibliotecas que exigem versões mais recentes do framework;
  • Aproveitar novos recursos introduzidos em versões mais recentes (Standalone Components, Signals, melhorias no compilador, etc.);
  • Segurança e manutenção, evitando dependências descontinuadas;
  • Melhoria de performance em build, testes e execução da aplicação.

A estratégia inicial

A primeira abordagem foi seguir o caminho "oficial" recomendado pelas ferramentas:

  1. Atualizar uma major version por vez (12 ➜ 13 ➜ 14 ➜ ... ➜ 17);
  2. Utilizar nx migrate e nx migrate --run-migrations para manter a compatibilidade do Nx a cada passo, verificando qual a versão do Nx compatível com a versão do Angular através da Matriz de compatibilidade de versão do Angular e Nx;
  3. Utilizar o Guia de Atualização do Angular para identificar breaking changes e ajustes necessários;
  4. Garantir o build das aplicações antes de prosseguir para a próxima versão.

Seguindo a matriz de compatibilidade e este guia, o caminho para a atualização de cada versão foi:

Angular 13 

nx migrate 14.1.9
Enter fullscreen mode Exit fullscreen mode

Verifique seu package.json e o arquivo migrations.json gerado. Posteriormente, basta aplicar as migrações com:

nx migrate --run-migrations --create-commits
Enter fullscreen mode Exit fullscreen mode

Angular 14 e Angular 15

Apesar da estratégia de migrar uma major version por vez, ao executar nx migrate 15.2.0, o pacote @nrwl/angular trouxe as migrações necessárias para levar o Angular até a versão 15.0.0. Decidi que isso não traria problemas, pois ainda estaríamos seguindo a recomendação de atualizar uma versão major por vez.

nx migrate 15.2.0
Enter fullscreen mode Exit fullscreen mode

Verifique seu package.json e o arquivo migrations.json gerado. Posteriormente, basta aplicar as migrações com:

nx migrate --run-migrations --create-commits
Enter fullscreen mode Exit fullscreen mode

Angular Material 15

Um dos pontos mais críticos da atualização foi a migração para o Angular Material 15, que mudou a forma de definir paletas, tipografia e temas. Além disso, houve a alteração dos componentes para MDC-based components. Este guia foi crucial para realizar o upgrade.

Angular 16, 17 e Mudança de Planos

Nesse ponto da atualização, ao tentar executar o nx migrate para qualquer versão, eu enfrentava uma série de erros diferentes. Além disso, meu prazo estava se aproximando do fim. Eu sabia que havia algo errado com meu workspace — talvez uma configuração incorreta ou a falta de alguma versão necessária de alguma dependência do Nx.

Ao mesmo tempo, eu sabia que a parte crítica da atualização tinha sido superada. De acordo com o Guia de Atualização do Angular, poucas breaking changes das versões 16 e 17 afetavam meu projeto de forma significativa.

Nesse momento, decidi fazer uma mudança de planos e seguir com uma abordagem manual e direta:

  • Criei um novo workspace Nx utilizando a versão 17.3.0, com o intuito de verificar as diferenças com relação ao meu workspace;
  • Alterar manualmente o que estava discrepante;
  • Ignorar a versão 16, que traria pouco valor isoladamente;
  • Atualizar o Angular e o Nx diretamente para a versão 17;
  • Abandonar o nx migrate, realizando atualizações manuais das dependências e ajustes no project.json/tsconfig.

Essa abordagem foi mais arriscada, mas reduziu o tempo total e permitiu focar nos breaking changes mais relevantes, já no estado final desejado.

Finalizando o upgrade

A última etapa da atualização envolveu atualizar bibliotecas internas e externas para versões compatíveis, verificar o build das aplicações e corrigir erros pontuais.

Conclusão

Migrar do Angular 12 para o 17 em um monorepo Nx não é apenas trocar versões no package.json. É um processo que envolve:

  • Conhecer as mudanças entre cada versão;
  • Ajustar bibliotecas internas e externas;
  • Tomar boas decisões sobre o caminho a ser percorrido.

Se você planeja uma migração parecida, estude os breaking changes, valide a compatibilidade Nx/Angular e esteja pronto para lidar com ajustes inesperados — eles certamente vão aparecer.

Fontes:

Comments 0 total

    Add comment