Vor dem Beginn der Entwicklung mit Angular muss die Arbeitsumgebung eingerichtet werden. Dafür sind drei grundlegende Werkzeuge erforderlich: 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:

Durch Ausführen von npm -v wird die installierte Version von npm angezeigt — ein Hinweis darauf, dass es korrekt installiert wurde und einsatzbereit ist.

Installation der Angular CLI

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

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

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

Dies zeigt die Versionsinformationen der Angular CLI und anderer installierter Abhängigkeiten an.

Installation von VS Code

1. Zur offiziellen VS Code Website gehen;

2. Die Version für das 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. Zum 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 Tools für eine einfachere Angular-Entwicklung in VS Code hinzuzufügen.