Como configurar o Angular no VS Code [Guia]

Angular é uma estrutura de aplicativo da web de código aberto que usa JavaScript. Ao contrário de algumas outras estruturas ou linguagens de programação, você precisa configurar a variável de ambiente no Windows para que esta estrutura funcione. Portanto, devemos aprender como configurar o Angular no VS Code e escrever um código de demonstração, é isso que faremos.

Como configurar o Angular no VS Code

Para configurar o Angular no VS Code em seu computador Windows, você precisa seguir as etapas mencionadas abaixo.

1. Instale o código do Visual Studio
2. Configurar o NodeJS
3. Configure a variável de ambiente
4. Instalar Angular

Vamos falar sobre eles em detalhes.

1] Instale o código do Visual Studio

Para começar nossa jornada de codificação no domínio Angular, precisamos instalar o Visual Studio Code. Para fazer o mesmo, você precisa acessar code.visualstudio.com e baixar o aplicativo para o seu ambiente. Depois de baixado, vá para a pasta Download, execute a mídia de instalação e instale o aplicativo.

2] Configure o NodeJS

É importante observar que embora você possa usar o VSCode para editar o Angular, você não pode executá-lo diretamente no editor. Na verdade, o Angular é executado no NodeJS, que é um ambiente JavaScript que faz parte da configuração local de desenvolvimento web. Com o NodeJS, você pode executar o Angular em seu host local em um navegador da web. Cada vez que você fizer alterações em seu código Angular no VSCode, ele será recarregado automaticamente no navegador, o que é conhecido como “hot reload”. No entanto, como o Angular é executado no NodeJS, você precisará instalar o NodeJS primeiro. Você pode fazer isso acessando nodejs.org .

Ao instalar o Node JS para executar o Angular, escolha um local que seja fácil de lembrar, como um caminho simples e curto. Isso será útil se você precisar usar o NodeJS posteriormente. Portanto, em vez de instalar o aplicativo em Arquivos de Programas, instale-o em D:\NodeJS, embora isso não importe.

3] Configure a variável de ambiente

Em seguida, precisamos configurar a variável de ambiente para NodeJs antes de prosseguirmos e instalarmos o Angular. Para fazer o mesmo, siga estas etapas.

• Pressione Win + S, digite “Variável de Ambiente” e abra-o.
• Feito isso, você precisa copiar a localização do NodeJS. Apenas para referência, o nosso é D:\NodeJS.
• Clique em Variável de ambiente.
• Agora, selecione Caminho na seção Variável do sistema e clique em Editar.
• Clique em Novo, cole o local e clique em OK.

Desta forma, você inseriu a variável de ambiente NodeJS. Para verificar se está funcionando, abra o prompt de comando e execute node –version. Se lhe der uma versão, podemos instalar o Angular.

4]Instale o Angular

Depois de criar um ambiente adequado instalando o NodeJS, instalaremos o Angular. Siga as etapas mencionadas abaixo para fazer o mesmo.

• Abra o código do Visual Studio.
• Navegue até o local onde deseja criar um arquivo Angular usando o comando CD ou Alterar diretório. Criamos um novo diretório na unidade D para criar um projeto, confira a imagem em anexo.

• Para instalar o angular na pasta, precisamos executar o seguinte comando.npm install -g @angular/cli
• Em seguida, execute o seguinte comando para criar um novo projeto.ng new foldername
• Agora entre nessa pasta usando “cd foldername” e inicie o servidor usando ng serve.

Esperançosamente, agora você pode executar o Angular sem problemas.

Este comando não está disponível ao executar o Angular CLI fora de um espaço de trabalho

Quando executei o comando “ng serve”, recebi um erro informando que o comando não estava disponível. Muitas pessoas suspeitam que o Angular não está instalado em seus sistemas, mas, na realidade, o único problema é que você não está no diretório correto. Para resolver isso, basta fazer ‘cd’ no diretório onde o projeto está localizado, não no local raiz, mas no local real do projeto. Então, a princípio, quando executei o comando, eu estava no AngularProject, que é minha pasta raiz, então não funcionou. No entanto, funcionou perfeitamente quando mudei o diretório para sampleFolder e executei o mesmo comando.

Uma solução alternativa que recomendamos é abrir o File Explorer, ir até o local onde seu projeto está armazenado, clicar com o botão direito na tela vazia e selecionar Terminal > Prompt de Comando. E então execute ng serve.

Como configurar o projeto Angular no Visual Studio Code?

Para configurar um projeto Angular, primeiro você precisa instalar o NodeJS em seu computador. Uma vez feito isso, você precisa configurar a variável de ambiente e instalar o Angular usando o comando npm install -g @angular/cli . Agora vá em frente e crie um novo diretório usando o comando ng new foldername, para saber mais, confira os passos mencionados anteriormente.

Como gerar Angular VSCode?

Angular File Generator é uma extensão útil para Visual Studio Code que permite criar arquivos Angular com apenas alguns cliques. Ele é construído na CLI Angular e usa os mesmos esquemas da CLI. Além disso, oferece a opção de gerar arquivos diretamente do terminal.