So richten Sie Angular in VS Code ein [Anleitung]

Angular ist ein Open-Source-Framework für Webanwendungen, das JavaScript verwendet. Im Gegensatz zu einigen anderen Frameworks oder Programmiersprachen müssen Sie die Umgebungsvariable in Windows einrichten, damit dieses Framework funktioniert. Daher müssen wir lernen, wie man Angular in VS Code einrichtet und einen Democode schreibt. Genau das werden wir tun.

So richten Sie Angular in VS Code ein

Um Angular in VS Code auf Ihrem Windows-Computer einzurichten, müssen Sie die unten aufgeführten Schritte befolgen.

1. Installieren von Visual Studio Code
2. Einrichten von NodeJS
3. Einrichten der Umgebungsvariable
4. Angular installieren

Lassen Sie uns ausführlich darüber sprechen.

1] Installieren Sie Visual Studio Code

Um mit unserer Programmierreise im Angular-Bereich zu beginnen, müssen wir Visual Studio Code installieren. Dazu müssen Sie zu code.visualstudio.com gehen und die App für Ihre Umgebung herunterladen. Gehen Sie nach dem Download zum Download-Ordner, führen Sie das Installationsmedium aus und installieren Sie die Anwendung.

2] NodeJS einrichten

Es ist wichtig zu beachten, dass Sie zwar VSCode zum Bearbeiten von Angular verwenden können, es jedoch nicht direkt im Editor ausführen können. Angular wird tatsächlich in NodeJS ausgeführt, einer JavaScript-Umgebung, die Teil Ihrer lokalen Webentwicklungseinrichtung ist. Mit NodeJS können Sie Angular auf Ihrem lokalen Host in einem Webbrowser ausführen. Jedes Mal, wenn Sie in VSCode Änderungen an Ihrem Angular-Code vornehmen, wird dieser automatisch im Browser neu geladen, was als „Hot Reload“ bezeichnet wird. Da Angular jedoch in NodeJS ausgeführt wird, müssen Sie zuerst NodeJS installieren. Sie können dies tun, indem Sie zu nodejs.org gehen .

Wählen Sie beim Installieren von Node JS zum Ausführen von Angular einen Speicherort, der leicht zu merken ist, z. B. einen einfachen und kurzen Pfad. Dies ist hilfreich, wenn Sie NodeJS später verwenden müssen. Installieren Sie die App also nicht in den Programmdateien, sondern in D:\NodeJS, obwohl dies keine Rolle spielt.

3] Richten Sie die Umgebungsvariable ein

Als Nächstes müssen wir die Umgebungsvariable für NodeJs einrichten, bevor wir mit der Installation von Angular fortfahren. Befolgen Sie dazu diese Schritte.

• Drücken Sie Win + S, geben Sie „Umgebungsvariable“ ein und öffnen Sie sie.
• Anschließend müssen Sie den Speicherort von NodeJS kopieren. Nur als Referenz: Unser Speicherort ist D:\NodeJS.
• Klicken Sie auf Umgebungsvariable.
• Wählen Sie nun im Abschnitt „Systemvariable“ „Pfad“ aus und klicken Sie auf „Bearbeiten“.
• Klicken Sie auf Neu, fügen Sie den Speicherort ein und klicken Sie auf OK.

Auf diese Weise haben Sie die NodeJS-Umgebungsvariable eingegeben. Um zu überprüfen, ob sie funktioniert, öffnen Sie die Eingabeaufforderung und führen Sie dann node –version aus. Wenn Sie eine Version erhalten, können wir Angular installieren.

4] Installieren Sie Angular

Nachdem wir durch die Installation von NodeJS eine geeignete Umgebung erstellt haben, installieren wir Angular. Befolgen Sie dazu die unten aufgeführten Schritte.

• Öffnen Sie Visual Studio Code.
• Navigieren Sie mit dem Befehl „CD“ oder „Verzeichnis ändern“ zu dem Speicherort, an dem Sie eine Angular-Datei erstellen möchten. Wir haben auf dem Laufwerk D ein neues Verzeichnis erstellt, um ein Projekt zu erstellen. Sehen Sie sich den beigefügten Screenshot an.

• Um Angular im Ordner zu installieren, müssen wir den folgenden Befehl ausführen.npm install -g @angular/cli
• Führen Sie dann den folgenden Befehl aus, um ein neues Projekt zu erstellen.ng new foldername
• Gehen Sie jetzt mit „cd Ordnername“ in den Ordner und starten Sie den Server mit ng serve.

Hoffentlich können Sie Angular jetzt ohne Probleme ausführen.

Dieser Befehl ist nicht verfügbar, wenn die Angular CLI außerhalb eines Arbeitsbereichs ausgeführt wird.

Als ich den Befehl „ng serve“ ausführte, erhielt ich eine Fehlermeldung, die besagte, dass der Befehl nicht verfügbar sei. Viele Leute vermuten, dass Angular nicht auf ihrem System installiert ist, während das einzige Problem in Wirklichkeit darin besteht, dass Sie sich nicht im richtigen Verzeichnis befinden. Um das Problem zu beheben, wechseln Sie einfach per „cd“ in das Verzeichnis, in dem sich das Projekt befindet, nicht in das Stammverzeichnis, sondern in den tatsächlichen Projektspeicherort. Als ich den Befehl ausführte, befand ich mich also zunächst in AngularProject, meinem Stammverzeichnis, sodass es nicht funktionierte. Es funktionierte jedoch reibungslos, als ich das Verzeichnis in sampleFolder änderte und denselben Befehl ausführte.

Als Workaround empfehlen wir Ihnen, den Datei-Explorer zu öffnen, zum Speicherort Ihres Projekts zu gehen, mit der rechten Maustaste auf den leeren Bildschirm zu klicken und „Terminal > Eingabeaufforderung“ auszuwählen. Führen Sie anschließend „ng serve“ aus.

Wie richte ich ein Angular-Projekt in Visual Studio Code ein?

Um ein Angular-Projekt einzurichten, müssen Sie zunächst NodeJS auf Ihrem Computer installieren. Anschließend müssen Sie die Umgebungsvariable konfigurieren und Angular mit dem Befehl npm install -g @angular/cli installieren . Erstellen Sie nun mit dem Befehl ng new foldername ein neues Verzeichnis. Weitere Informationen finden Sie in den zuvor genannten Schritten.

Wie erstelle ich Angular VSCode?

Angular File Generator ist eine praktische Erweiterung für Visual Studio Code, mit der Sie Angular-Dateien mit nur wenigen Klicks erstellen können. Es basiert auf der Angular CLI und verwendet dieselben Schemata wie die CLI. Darüber hinaus bietet es eine Option zum Generieren von Dateien direkt vom Terminal aus.