Vor dem Beginn der Entwicklung mit Angular ist die Einrichtung der Arbeitsumgebung erforderlich. Dafür werden drei wesentliche Werkzeuge benötigt: Node.js, Angular CLI und VS Code.

Installation von Node.js

1. Auf die offizielle Node.js Website gehen;

2. Die LTS (Long-Term Support) Version von Node.js verwenden, da Angular möglicherweise noch nicht vollständig mit der neuesten Version kompatibel ist.

3. Das eigene Betriebssystem auswählen—hier wird macOS gewählt, aber das passende System auswählen. Die übrigen Einstellungen unverändert lassen;

4. Den Installer herunterladen und den Anweisungen auf dem Bildschirm folgen, um die Installation abzuschließen.

Nach der Installation das Terminal (oder die Eingabeaufforderung) öffnen und überprüfen, ob Node.js installiert ist:

Wenn alles korrekt eingerichtet ist, zeigt dieser Befehl die installierte Node.js-Version an.

Anschließend überprüfen, ob npm (Node Package Manager) installiert ist:

Die Ausführung von npm -v zeigt die installierte Version von npm an — ein Hinweis darauf, dass es korrekt installiert wurde und einsatzbereit ist.

Installation des Angular CLI

Um das Angular CLI zu installieren, zunächst das Terminal (oder die Eingabeaufforderung) öffnen. Anschließend den folgenden Befehl ausführen, um das Angular CLI global zu installieren:

Dieser Befehl installiert Angular CLI global auf Ihrem System und macht es für jedes Angular-Projekt verfügbar.

Nach Abschluss der Installation die Version der Angular CLI mit folgendem Befehl überprüfen:

Dies zeigt die Versionsinformationen für die Angular CLI und andere installierte Abhängigkeiten an.

Installation von VS Code

1. Auf die offizielle VS Code Website gehen;

2. Die Version für das eigene Betriebssystem auswählen (Windows, macOS oder Linux);

3. Den Installer herunterladen und den Anweisungen auf dem Bildschirm folgen, um die Installation abzuschließen.

Nach der Installation VS Code öffnen und die notwendigen Erweiterungen einrichten:

1. In den Erweiterungsbereich wechseln (Ctrl + Shift + X unter Windows oder Cmd + Shift + X unter macOS);

2. Die Erweiterung Angular Language Service für Code-Hervorhebung und Autovervollständigung installieren;

3. Optional kann Angular Essentials installiert werden, um Syntaxunterstützung, Autovervollständigung und weitere Werkzeuge für eine einfachere Angular-Entwicklung in VS Code hinzuzufügen.