Come impostare Angular in VS Code [Guida]

Angular è un framework di applicazioni web open source che utilizza JavaScript. A differenza di altri framework o linguaggi di programmazione, è necessario impostare la variabile di ambiente in Windows affinché questo framework funzioni. Quindi, dobbiamo imparare come configurare Angular in VS Code e scrivere un codice demo, ecco cosa faremo.

Come impostare Angular in VS Code

Per configurare Angular in VS Code sul tuo computer Windows, devi seguire i passaggi indicati di seguito.

1. Installa il codice di Visual Studio
2. Configura NodeJS
3. Imposta la variabile d’ambiente
4. Installa Angular

Parliamo di loro in dettaglio.

1] Installa il codice di Visual Studio

Per iniziare il nostro viaggio nella codifica nel regno Angular, dobbiamo installare Visual Studio Code. Per fare lo stesso, devi andare su code.visualstudio.com e scaricare l’app per il tuo ambiente. Una volta scaricato, vai alla cartella Download, esegui il supporto di installazione e installa l’applicazione.

2] Configura NodeJS

È importante notare che sebbene sia possibile utilizzare VSCode per modificare Angular, non è possibile eseguirlo direttamente nell’editor. Angular viene effettivamente eseguito all’interno di NodeJS, che è un ambiente JavaScript che fa parte della configurazione di sviluppo web locale. Con NodeJS, puoi eseguire Angular sul tuo host locale in un browser web. Ogni volta che apporti modifiche al tuo codice Angular in VSCode, questo verrà ricaricato automaticamente nel browser, operazione nota come “ricaricamento a caldo”. Tuttavia, poiché Angular viene eseguito in NodeJS, dovrai prima installare NodeJS. Puoi farlo andando su nodejs.org .

Quando installi Node JS per eseguire Angular, scegli una posizione facile da ricordare, come un percorso semplice e breve. Ciò sarà utile se avrai bisogno di utilizzare NodeJS in un secondo momento. Quindi, invece di installare l’app nei file di programma, installala in D:\NodeJS, anche se non importa.

3] Imposta la variabile d’ambiente

Successivamente, dobbiamo impostare la variabile di ambiente per NodeJs prima di procedere e installare Angular. Per fare lo stesso, segui questi passaggi.

• Premi Win + S, digita “Variabile d’ambiente” e quindi aprilo.
• Una volta terminato, devi copiare la posizione di NodeJS. Solo per riferimento, il nostro è D:\NodeJS.
• Fare clic su Variabile d’ambiente.
• Ora seleziona Percorso nella sezione Variabile di sistema e fai clic su Modifica.
• Fare clic su Nuovo, incollare la posizione e fare clic su Ok.

In questo modo, hai inserito la variabile d’ambiente NodeJS. Per verificare se funziona, apri il prompt dei comandi e quindi esegui node –version. Se ti fornisce una versione, possiamo installare Angular.

4] Installa Angular

Dopo aver creato un ambiente adeguato installando NodeJS, installeremo Angular. Segui i passaggi indicati di seguito per fare lo stesso.

• Apri il codice di Visual Studio.
• Passare alla posizione in cui si desidera creare un file Angular utilizzando il comando CD o Cambia directory. Abbiamo creato una nuova directory nell’unità D per creare un progetto, controlla lo screenshot allegato.

• Per installare angolare nella cartella, dobbiamo eseguire il seguente comando.npm install -g @angular/cli
• Quindi esegui il comando seguente per creare un nuovo progetto.ng new foldername
• Ora entra in quella cartella usando “cd nomecartella” e avvia il server usando ng serve.

Si spera che ora tu possa eseguire Angular senza problemi.

Questo comando non è disponibile quando si esegue la CLI Angular all’esterno di uno spazio di lavoro

Quando ho eseguito il comando “ng serve” ho ricevuto un errore che diceva che il comando non era disponibile. Molte persone sospettano che Angular non sia installato sul proprio sistema, mentre in realtà l’unico problema è che non sei nella directory corretta. Per risolverlo, basta eseguire “cd” nella directory in cui si trova il progetto, non nella posizione root ma nella posizione effettiva del progetto. Quindi, all’inizio, quando ho eseguito il comando, ero in AngularProject, che è la mia cartella principale, quindi non ha funzionato. Tuttavia, ha funzionato perfettamente quando ho cambiato la directory in sampleFolder ed ho eseguito lo stesso comando.

Una soluzione alternativa che ti consigliamo di fare è aprire Esplora file, andare nella posizione in cui è archiviato il progetto, fare clic con il pulsante destro del mouse sullo schermo vuoto e selezionare Terminale > Prompt dei comandi. E poi esegui ng serve.

Come impostare il progetto Angular in Visual Studio Code?

Per configurare un progetto Angular, devi prima installare NodeJS sul tuo computer. Una volta terminato, è necessario configurare la variabile d’ambiente e installare Angular utilizzando il comando npm install -g @angular/cli . Ora vai avanti e crea una nuova directory utilizzando il comando ng new foldername, per saperne di più, controlla i passaggi menzionati in precedenza.

Come generare VSCode angolare?

Angular File Generator è una pratica estensione per Visual Studio Code che ti consente di creare file Angular con pochi clic. È basato sulla CLI Angular e utilizza gli stessi schemi della CLI. Inoltre, fornisce un’opzione per generare file direttamente dal terminale.