Com configurar Angular al codi VS [Guia]

Angular és un marc d'aplicacions web de codi obert que utilitza JavaScript. A diferència d'altres marcs o llenguatges de programació, cal que configureu la variable d'entorn a Windows perquè aquest marc funcioni. Per tant, hem d'aprendre a fer-ho configurar Angular al codi VS i escriure un codi de demostració, això és el que farem.

Com configurar Angular a VS Code

Per configurar Angular a VS Code al vostre ordinador Windows, heu de seguir els passos esmentats a continuació.

són els meus connectors actualitzats

Instal·leu Visual Studio Code
Configura NodeJS
Configureu la variable d'entorn
Instal·leu Angular

Parlem-ne amb detall.

1] Instal·leu Visual Studio Code

Per començar amb el nostre viatge de codificació al regne Angular, hem d'instal·lar Visual Studio Code. Per fer el mateix, cal anar a code.visualstudio.com i baixa l'aplicació per al teu entorn. Un cop descarregat, aneu a descarregar carpeta, executeu el suport d'instal·lació i instal·leu l'aplicació.

2] Configureu NodeJS

És important tenir en compte que, tot i que podeu utilitzar VSCode per editar Angular, no podeu executar-lo directament a l'editor. Angular s'executa realment a NodeJS, que és un entorn JavaScript que forma part de la configuració del vostre desenvolupament web local. Amb NodeJS, podeu executar Angular al vostre host local en un navegador web. Cada vegada que feu canvis al vostre codi Angular a VSCode, es tornarà a carregar automàticament al navegador, que es coneix com a 'recàrrega en calent'. Tanmateix, com que Angular s'executa a NodeJS, primer haureu d'instal·lar NodeJS. Podeu fer-ho anant a nodejs.org .

Quan instal·leu Node JS per executar Angular, trieu una ubicació que sigui fàcil de recordar, com un camí senzill i curt. Això serà útil si necessiteu utilitzar NodeJS més tard. Per tant, en lloc d'instal·lar l'aplicació als fitxers de programa, instal·leu-la a D:\NodeJS, encara que no importa.

3] Configureu la variable d'entorn

A continuació, hem de configurar la variable d'entorn per a NodeJ abans de continuar i instal·lar Angular. Per fer el mateix, seguiu aquests passos.

Premeu Win + S, escriviu 'Variable ambiental' i després obrir-lo.
Un cop fet, heu de copiar la ubicació de NodeJS. Només com a referència, el nostre és D:\NodeJS.
Feu clic a Variable d'entorn.
Ara, seleccioneu Camí a la secció Variable del sistema i feu clic a Edita.
Feu clic a Nou, enganxeu la ubicació i feu clic a D'acord.

D'aquesta manera, heu introduït la variable d'entorn NodeJS. Per comprovar si funciona, obriu Símbol del sistema i després córrer versió node. Si us dóna una versió, estem bé d'instal·lar Angular.

4] Instal·leu Angular

Després de crear un entorn adequat instal·lant NodeJS, instal·larem Angular. Seguiu els passos esmentats a continuació per fer el mateix.

Obert Codi Visual Studio.
Navegueu fins a la ubicació on voleu crear un fitxer Angular mitjançant l'ordre CD o Canvia directori. Hem creat un nou directori a la unitat D per crear un projecte, mireu la captura de pantalla adjunta.

Per instal·lar angular a la carpeta, hem d'executar l'ordre següent.
```
npm install -g @angular/cli
```
A continuació, executeu l'ordre següent per crear un projecte nou.
```
ng new foldername
```
Ara, entreu dins d'aquesta carpeta amb 'cd foldername' i inicieu el servidor amb de servir.

Amb sort, ara podeu executar Angular sense cap problema.

mostra l'hora a la barra de tasques de Windows 10

Llegeix: Com instal·lar JavaScript a VSCode ?

Aquesta ordre no està disponible quan s'executa l'Angular CLI fora d'un espai de treball

Quan vaig executar l'ordre 'ng serve', vaig rebre un error que deia que l'ordre no estava disponible. Molta gent sospita que Angular no està instal·lat al seu sistema, mentre que, en realitat, l'únic problema és que no esteu al directori correcte. Per resoldre'l, només cal que feu 'cd' al directori on es troba el projecte, no a la ubicació arrel sinó a la ubicació real del projecte. Per tant, al principi, quan vaig executar l'ordre, estava a AngularProject, que és la meva carpeta arrel, de manera que no va funcionar. Tanmateix, va funcionar perfectament quan vaig canviar el directori a sampleFolder i vaig executar la mateixa ordre.

Una solució alternativa que us recomanem és obrir l'Explorador de fitxers, anar a la ubicació on s'emmagatzema el vostre projecte, fer clic amb el botó dret a la pantalla buida i seleccionar Terminal > Símbol del sistema . I després córrer de servir.

Llegeix: Com descarregar i instal·lar Java JDK a Windows ?

Com configurar el projecte Angular a Visual Studio Code?

Per configurar un projecte Angular, primer heu d'instal·lar NodeJS al vostre ordinador. Un cop fet, cal que configureu la variable d'entorn i instal·leu Angular mitjançant el npm install -g @angular/cli comandament. Ara, endavant i creeu un nou directori utilitzant del nom de la carpeta nova comanda, per saber-ne més, consulteu els passos esmentats anteriorment.

Llegeix: Com configurar VS Code per a Microsoft C++

emmagatzematge gratuït

Com generar Angular VSCode?

Angular File Generator és una extensió útil per a Visual Studio Code que us permet crear fitxers angulars amb només uns quants clics. Està construït sobre la CLI angular i utilitza els mateixos esquemes que la CLI. A més, ofereix una opció per generar fitxers directament des del terminal.

Llegiu també: Com instal·lar Python a VS Code .