Antes de iniciar o desenvolvimento com Angular, é necessário configurar seu ambiente de trabalho. Isso requer três ferramentas essenciais: Node.js, Angular CLI e VS Code.

Instalando o Node.js

1. Acesse o site oficial do Node.js website;

2. Utilize a versão LTS (Long-Term Support) do Node.js em vez da versão mais recente, pois o Angular pode ainda não ser totalmente compatível com a versão mais nova.

3. Selecione seu sistema operacional—neste exemplo, está sendo escolhido o macOS, mas escolha aquele que corresponde ao seu ambiente. Mantenha as demais configurações inalteradas;

4. Baixe o instalador e siga as instruções na tela para concluir a instalação.

Após a instalação, abrir o terminal (ou prompt de comando) e verificar se o Node.js está instalado:

Se tudo estiver configurado corretamente, este comando exibirá a versão do Node.js instalada.

Em seguida, verificar se o npm (Node Package Manager) está instalado:

Executar npm -v exibirá a versão instalada do npm — um indicativo de que ele foi instalado corretamente e está pronto para uso.

Instalando o Angular CLI

Para instalar o Angular CLI, primeiro abra o seu terminal (ou prompt de comando). Em seguida, execute o seguinte comando para instalar o Angular CLI globalmente:

Este comando instala o Angular CLI globalmente em seu sistema, tornando-o disponível para qualquer projeto Angular.

Após a instalação ser concluída, verifique a versão do Angular CLI executando:

Isso irá exibir as informações da versão do Angular CLI e outras dependências instaladas.

Instalando o VS Code

1. Acesse o site oficial do VS Code website;

2. Selecione a versão para o seu sistema operacional (Windows, macOS ou Linux);

3. Baixe o instalador e siga as instruções na tela para concluir a instalação.

Após a instalação, abra o VS Code e configure as extensões necessárias:

1. Acesse a seção de Extensões (Ctrl + Shift + X no Windows ou Cmd + Shift + X no macOS);

2. Instale a extensão Angular Language Service para realce de código e autocompletar;

3. Também é possível instalar o Angular Essentials para adicionar suporte à sintaxe, autocompletar e outras ferramentas que facilitam o desenvolvimento Angular no VS Code.