Angular instellen in VS Code [Handleiding]

Angular is een open-source webapplicatieframework dat gebruik maakt van JavaScript. In tegenstelling tot sommige andere raamwerken of programmeertalen moet u de omgevingsvariabele in Windows instellen om dit raamwerk te laten werken. Daarom moeten we leren hoe we Angular in VS Code kunnen instellen en een democode kunnen schrijven, dat is wat we zullen doen.

Hoe Angular in VS Code in te stellen

Om Angular in VS Code op uw Windows-computer in te stellen, moet u de onderstaande stappen volgen.

1. Installeer Visual Studio-code
2. NodeJS instellen
3. Stel de omgevingsvariabele in
4. Hoekig installeren

Laten we er in detail over praten.

1] Installeer Visual Studio-code

Om aan de slag te gaan met onze codeerreis in het Angular-domein, moeten we Visual Studio Code installeren. Om hetzelfde te doen, moet u naar code.visualstudio.com gaan en de app voor uw omgeving downloaden. Na het downloaden gaat u naar de map Downloaden, voert u de installatiemedia uit en installeert u de toepassing.

2] NodeJS instellen

Het is belangrijk op te merken dat u VSCode weliswaar kunt gebruiken om Angular te bewerken, maar dat u dit niet rechtstreeks in de editor kunt uitvoeren. Angular wordt feitelijk uitgevoerd binnen NodeJS, een JavaScript-omgeving die deel uitmaakt van uw lokale webontwikkelingsopstelling. Met NodeJS kunt u Angular op uw lokale host in een webbrowser uitvoeren. Elke keer dat u wijzigingen aanbrengt in uw Angular-code in VSCode, wordt deze automatisch opnieuw geladen in de browser, ook wel “hot reload” genoemd. Omdat Angular echter in NodeJS draait, moet je eerst NodeJS installeren. U kunt dit doen door naar nodejs.org te gaan .

Wanneer u Node JS installeert om Angular uit te voeren, kies dan een locatie die gemakkelijk te onthouden is, zoals een eenvoudig en kort pad. Dit is handig als u NodeJS later moet gebruiken. Dus in plaats van de app in Programmabestanden te installeren, installeert u deze in D:\NodeJS, ook al maakt dat niet uit.

3] Stel de omgevingsvariabele in

Vervolgens moeten we de omgevingsvariabele voor NodeJs instellen voordat we doorgaan met het installeren van Angular. Om hetzelfde te doen, volgt u deze stappen.

• Druk op Win + S, typ “Omgevingsvariabele” en open het vervolgens.
• Als u klaar bent, moet u de locatie van NodeJS kopiëren. Ter referentie: de onze is D:\NodeJS.
• Klik op Omgevingsvariabele.
• Selecteer nu Pad in het gedeelte Systeemvariabele en klik op Bewerken.
• Klik op Nieuw, plak de locatie en klik op Ok.

Op deze manier hebt u de NodeJS Environment-variabele ingevoerd. Om te controleren of het werkt, opent u de opdrachtprompt en voert u vervolgens node –version uit. Als het u een versie geeft, kunnen we Angular installeren.

4] Installeer Angular

Nadat we een goede omgeving hebben gecreëerd door NodeJS te installeren, installeren we Angular. Volg de onderstaande stappen om hetzelfde te doen.

• Open Visual Studio-code.
• Navigeer naar de locatie waar u een Angular-bestand wilt maken met behulp van de opdracht CD of Change Directory. We hebben een nieuwe map op de D-schijf gemaakt om een ​​project te maken, bekijk de bijgevoegde schermafbeelding.

• Om angular in de map te installeren, moeten we de volgende opdracht uitvoeren.npm install -g @angular/cli
• Voer vervolgens de volgende opdracht uit om een ​​nieuw project te maken.ng new foldername
• Ga nu die map binnen met behulp van “cd mapnaam” en start de server met ng serve.

Hopelijk kun je Angular nu zonder problemen gebruiken.

Deze opdracht is niet beschikbaar als u de Angular CLI buiten een werkruimte uitvoert

Toen ik de opdracht “ng serve” uitvoerde, kreeg ik een foutmelding dat de opdracht niet beschikbaar was. Veel mensen vermoeden dat Angular niet op hun systeem is geïnstalleerd, terwijl het enige probleem in werkelijkheid is dat u zich niet in de juiste map bevindt. Om het op te lossen, hoeft u alleen maar ‘cd’ te doen naar de map waar het project zich bevindt, niet de hoofdlocatie maar de daadwerkelijke projectlocatie. Dus toen ik de opdracht uitvoerde, bevond ik me in eerste instantie in AngularProject, wat mijn hoofdmap is, dus het werkte niet. Het werkte echter naadloos toen ik de map veranderde in sampleFolder en dezelfde opdracht uitvoerde.

Een oplossing die we u aanraden is om de Verkenner te openen, naar de locatie te gaan waar uw project is opgeslagen, met de rechtermuisknop op het lege scherm te klikken en Terminal > Opdrachtprompt te selecteren. En dan serveren.

Hoe kan ik een Angular-project instellen in Visual Studio Code?

Om een ​​Angular-project op te zetten, moet je eerst NodeJS op je computer installeren. Als u klaar bent, moet u de omgevingsvariabele configureren en Angular installeren met behulp van de opdracht npm install -g @angular/cli . Ga nu door en maak een nieuwe map met de opdracht ng new foldername. Bekijk voor meer informatie de eerder genoemde stappen.

Hoe Angular VSCode genereren?

Angular File Generator is een handige extensie voor Visual Studio Code waarmee u met slechts een paar klikken Angular-bestanden kunt maken. Het is gebouwd op de Angular CLI en gebruikt dezelfde schema’s als de CLI. Bovendien biedt het een optie om bestanden rechtstreeks vanaf de terminal te genereren.