CLI Befehle

Projekt-Setup & Start

Diese Befehle benötigst du, um neue Projekte zu starten, sie lokal auszuführen oder Informationen über deine Entwicklungsumgebung zu erhalten.

ng new (Neues Projekt erstellen)

Erstellt einen komplett neuen, lauffähigen Angular-Workspace inklusive Dateistruktur, TypeScript-Konfiguration und Git-Repository.

• ng new my-app
• --routing: Richtet direkt das Angular Routing ein.
• --style=scss: Legt SCSS als globale Styling-Sprache fest.
• --ssr: Aktiviert Server-Side Rendering (Hydration) von Beginn an.
• --dry-run: Simuliert die Dateierstellung nur, ohne etwas auf die Festplatte zu schreiben.

ng serve (Entwicklungsserver)

Alias: ng s oder ng dev Baut die App im Arbeitsspeicher (RAM) und startet einen lokalen Webserver mit Hot Module Replacement (HMR).

• ng serve
• --open (-o): Öffnet die App nach dem Build automatisch im Standardbrowser.
• --port 4201: Ändert den Standardport von 4200 auf einen anderen Wert.

ng version (Version prüfen)

Alias: ng v Gibt detaillierte Informationen über die installierte Version der Angular CLI, Node.js, des Betriebssystems und aller installierten @angular/* Pakete aus.

• ng version

---

Code generieren & Erweitern

Das manuelle Erstellen von Dateien ist in Angular verpönt. Die CLI übernimmt das Erstellen und Verlinken.

ng generate (Dateien erzeugen)

Alias: ng g Erstellt neue Komponenten, Services, Pipes, Direktiven und mehr nach den offiziellen Best Practices.

• ng generate component my-comp (oder ng g c my-comp)
• ng g service my-service (oder ng g s my-service)
• --inline-template / --inline-style: Schreibt Template oder Styles direkt in die .ts Datei, statt separate Dateien anzulegen.
• --skip-tests: Verhindert die Erstellung der .spec.ts Testdatei.

ng add (Bibliotheken hinzufügen)

Installiert ein NPM-Paket und führt automatisch dessen Installations-Skripte (Schematics) aus. Niemals Angular-Libraries wie Material nur über npm install laden!

• ng add @angular/material: Installiert Material, fragt nach dem Theme, richtet globale Typografien ein und updatet die angular.json.
• ng add @angular/fire: Verbindet deine App interaktiv mit Firebase.

---

Qualitätssicherung & Tests

Bevor Code in Produktion geht, muss er geprüft werden. Die CLI bietet nahtlose Integration in Test- und Linting-Frameworks.

ng test (Unit Tests)

Alias: ng t Führt die Unit-Tests der Anwendung aus (standardmäßig Karma/Jasmine, in modernen Workspaces oft Web Test Runner oder Jest).

• ng test
• --watch=false: Führt die Tests nur einmalig aus (CI/CD Pipeline), anstatt im Hintergrund auf Dateiänderungen zu warten.
• --code-coverage: Generiert einen ausführlichen Coverage-Report im Ordner coverage/.

ng e2e (End-to-End Tests)

Alias: ng e Startet End-to-End Tests. Standardmäßig liefert Angular kein E2E-Framework mehr mit, aber Befehle wie ng e2e leiten oft an Cypress oder Playwright weiter, wenn diese via ng add hinzugefügt wurden.

ng lint (Statische Code-Analyse)

Überprüft deinen Code auf syntaktische Fehler und Styleguide-Verletzungen. Erfordert in modernen Projekten ein Setup von ESLint (z.B. via ng add @angular-eslint/schematics).

• ng lint
• --fix: Versucht, gefundene Formatierungsfehler direkt automatisch im Code zu korrigieren.

---

Build, Übersetzungen & Deployment

Die finalen Schritte vor dem Release.

ng build (Produktions-Build)

Alias: ng b Kompiliert die Anwendung in ein Ausgabe-Verzeichnis (dist/). Der Code wird minifiziert, per Tree-Shaking optimiert und für den Browser vorbereitet.

• ng build
• In modernen Angular-Versionen ist der Produktionsmodus Standard. Früher war hier das Flag --prod notwendig.

ng extract-i18n (Übersetzungen extrahieren)

Durchsucht alle deine HTML-Templates nach dem Attribut i18n und extrahiert diese Texte in eine .xlf (XML Localization Interchange File Format) Datei. Diese Datei kannst du dann an ein Übersetzungsbüro geben.

• ng extract-i18n

ng deploy (Automatisches Deployment)

Baut deine Anwendung und lädt sie direkt zu einem Hosting-Provider hoch. Setzt voraus, dass du vorher einen Builder für deinen Provider hinzugefügt hast (z.B. ng add @angular/fire für Firebase Hosting oder Vercel/Netlify).

• ng deploy

---

Konfiguration, Updates & Wartung

Werkzeuge für die Pflege bestehender Workspaces.

ng update (Framework aktualisieren)

Updatet deine Angular-Anwendung sowie alle offiziellen Abhängigkeiten auf eine neue Version.

• ng update: Zeigt an, welche Pakete aktualisiert werden können.
• ng update @angular/core @angular/cli: Lädt die neuen Versionen herunter und führt Migrations-Skripte aus, die deinen Code (falls nötig) vollautomatisch an neue APIs anpassen.

ng config (Workspace konfigurieren)

Erlaubt das Auslesen und Ändern von Werten direkt in der angular.json Datei über die Kommandozeile.

• ng config cli.packageManager yarn: Setzt z.B. Yarn als Standard-Paketmanager für zukünftige Installationen.

ng cache (Build-Cache verwalten)

Angular speichert Build-Ergebnisse auf der Festplatte, um nachfolgende ng serve oder ng build Aufrufe massiv zu beschleunigen. Mit diesem Befehl kannst du den Cache steuern.

• ng cache clean: Leert den Cache (hilft oft bei mysteriösen Build-Fehlern).
• ng cache enable / ng cache disable: Schaltet das Caching systemweit ein oder aus.

ng run (Benutzerdefinierte Skripte)

Führt ein spezifisches "Architect Target" aus der angular.json aus. So arbeiten ng serve und ng build unter der Haube auch.

• Syntax: ng run <project>:<target>[:<configuration>]
• Beispiel: ng run my-app:build:production

ng analytics (Telemetrie)

Aktiviert oder deaktiviert das Senden von anonymisierten Nutzungsdaten an das Angular-Team bei Google.

• ng analytics on oder ng analytics off

ng completion (Terminal Autovervollständigung)

Richtet die automatische Tab-Vervollständigung für Angular CLI Befehle in deinem Terminal (Bash/Zsh) ein.

• ng completion

Häufige Stolperfallen

npm install statt ng add

Wenn eine Bibliothek tiefgreifende Änderungen in der Konfiguration erfordert (wie Angular Material, PWA-Module oder ESLint), darfst du sie nicht einfach mit npm install laden. Die fehlenden Setup-Skripte führen zu unzähligen Folgefehlern. Nutze immer ng add [paket].

Dateien manuell verschieben

Wenn du eine Komponente oder einen Service über die Kommandozeile generiert hast, solltest du sie nicht einfach per Drag & Drop im Datei-Explorer verschieben. Das zerreißt sämtliche internen Pfade. Lösche die Dateien sauber und generiere sie mit dem korrekten Pfad (ng g c features/my-comp) neu.

Ohne --dry-run experimentieren

Es passiert schnell, dass man einen Generierungs-Befehl im falschen Ordner ausführt. Gewöhne dir an, bei unsicheren Befehlen immer --dry-run (oder -d) anzuhängen. Es zeigt dir genau an, wo Dateien entstehen würden, ohne sie wirklich auf die Festplatte zu schreiben.

Weiterführende Ressourcen

Externe Quellen

• Offizielle CLI Referenz – Angular.dev
• Update Guide – Angular.dev

Verwandte Artikel

• Installation & Setup
• Der Aufbau einer Komponente