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 comoconfigurar Angular no código VSe escrever um código de demonstração, é isso que faremos.

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

Instale o código do Visual Studio
Configurar o NodeJS
Configure a variável de ambiente
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 ir paracode.visualstudio.come baixe o aplicativo para o seu ambiente. Depois de baixado, vá para oDownloadpasta, 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 acessandonodejs.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 Ambiental”e depois 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, abraPrompt de comandoe então corranó –versão.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.

AbrirCó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 usandode servir.

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

Ler:?

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 selecionarTerminal> Prompt de Comando. E então corrade servir.

Ler:?

Como configurar o projeto Angular no Visual Studio Code?

Para configurar um projeto Angular, primeiro você precisa instalar o NodeJS em seu computador. Feito isso, você precisa configurar a variável de ambiente e instalar o Angular usando onpm install -g @angular/cli comando. Agora, vá em frente e crie um novo diretório usandong new foldername comando, para saber mais, confira as etapas mencionadas anteriormente.

Ler:

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.

Leia também:.