Explorando Angular 18 sem interromper projetos existentes

Recentemente, eu estava trabalhando em um projeto Angular 17 e senti vontade de explorar os novos recursos interessantes do Angular 18. No entanto, eu queria fazer isso de uma forma que não afetasse meus projetos existentes que já estavam em produção ou Fases de controle de qualidade. Isso apresentou um certo desafio:

• Global Angular 17: Eu tinha o Angular CLI versão 17 instalado globalmente.
• Requisito do Angular 18: Node.js versão 18.19 ou superior era um pré-requisito para o Angular 18.
• Preservando projetos existentes: Eu precisava manter meus projetos existentes do Angular 17 intactos.

Aproveitando o Node Version Manager (NVM):

Para resolver isso, decidi aproveitar um Node Version Manager (NVM). O NVM permite gerenciar várias versões do Node.js em seu sistema, facilitando a alternância entre elas para diferentes projetos. Veja como eu configurei:

1. Instale o NVM: Você pode seguir as instruções no site oficial do NVM para fazer o download e instalá-lo aqui.

2. Instalar Node.js 18: Assim que o NVM estiver instalado, usei o comando
   

nvm install latest 

Isso instalou a versão mais recente do Node.js (que na época era 22.4.1).

Criando um ambiente de desenvolvimento separado:

Em seguida, criei um diretório separado para meus projetos práticos do Angular 18. Isso ajuda a isolar o ambiente dos meus projetos existentes.

Instalando Angular 18 localmente:

Para instalar o Angular 18 para este projeto específico, usei o seguinte comando:

npm install @angular/cli@latest 

Observe a ausência de -g. Isso instala a versão mais recente do Angular CLI (que era 18.1.0 na época) localmente no diretório do projeto, sem afetar a instalação global.

Surpresa! Ainda não chegamos lá:

Quando tentei criar um novo projeto usando ng new practices-project, o padrão foi usar a versão Angular CLI instalada globalmente (17). É aqui que entra a magia do npx.

Apresentando o Node Package Executor (npx):

npx permite que você execute pacotes do npm sem instalá-los globalmente. Esta provou ser a chave para usar a versão específica do Angular CLI (18) para meu novo projeto. Aqui está o comando vencedor:

npx @angular/cli@18 new my-angular-18-project

Eu verifico o projeto executando ng version

Sucesso! Explorando Angular 18:

Depois de esperar a instalação das dependências necessárias, eu tinha um novo projeto Angular 18 (my-angular-18-project) pronto para funcionar! Isso me permitiu explorar todos os novos recursos do Angular 18, incluindo a emocionante sintaxe @let, sem interferir nos meus projetos existentes do Angular 17.