CLI Referenz
Die CLI Referenz in Angular (Command Line Interface) ist ein zentrales Werkzeug im modernen Angular-Ökosystem. Sie ermöglicht Entwicklern, wiederkehrende Aufgaben – wie das Erstellen, Bauen, Testen und Bereitstellen von Anwendungen – effizient zu automatisieren. Mit der CLI können Angular-Projekte strukturiert und konsistent aufgebaut werden, wodurch Entwicklungsfehler reduziert und Best Practices automatisch durchgesetzt werden.
Die CLI ist besonders wichtig für die komponentenbasierte Architektur von Angular. Sie unterstützt Entwickler dabei, Komponenten, Module, Services, Pipes und Direktiven mit vordefinierten Strukturen zu generieren, wodurch die Wartbarkeit und Erweiterbarkeit komplexer Single-Page Applications (SPAs) gewährleistet wird.
In dieser Referenz lernen Sie, wie Sie die CLI verwenden, um Angular-Komponenten effizient zu generieren, Zustandsverwaltung und Datenfluss sauber zu implementieren und Lifecycle-Hooks optimal zu nutzen. Darüber hinaus werden fortgeschrittene CLI-Funktionen behandelt, wie etwa Konfigurationen, Umgebungsvariablen, Build-Optimierung und Deployment.
Im Kontext moderner Webanwendungen ist die CLI der Schlüssel zu einer skalierbaren Architektur und produktiven Entwicklungsumgebung. Sie bildet die Grundlage für das Angular-Entwicklungserlebnis und ermöglicht einen konsistenten Workflow vom Prototyping bis zur produktionsreifen Anwendung.
Grundlegendes Beispiel
typescript// Grundlegendes Beispiel: Nutzung der Angular CLI zur Erstellung einer Komponente und eines Dienstes
// CLI-Befehle:
// ng new cli-demo-app --routing --style=scss
// cd cli-demo-app
// ng generate component components/user-card
// ng generate service services/user
// user.service.ts
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class UserService {
private user = { name: 'Max Mustermann', age: 28 };
getUser() {
return this.user;
}
}
// user-card.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service';
@Component({
selector: 'app-user-card',
templateUrl: './user-card.component.html',
styleUrls: ['./user-card.component.scss']
})
export class UserCardComponent implements OnInit {
user: any;
constructor(private userService: UserService) {}
ngOnInit(): void {
this.user = this.userService.getUser();
}
}
// user-card.component.html
<div class="user-card">
<h3>{{ user.name }}</h3>
<p>Alter: {{ user.age }}</p>
</div>In diesem Beispiel zeigt die Angular CLI ihre Stärke bei der automatischen Generierung von Komponenten und Services. Durch die Befehle ng generate component und ng generate service wird die Projektstruktur automatisch angepasst, inklusive der Aktualisierung der Moduldefinitionen.
Der UserService ist ein einfaches Beispiel für Zustandsverwaltung auf Anwendungsebene. Durch den @Injectable()-Dekorator wird der Service im Root-Injektor registriert und steht somit global zur Verfügung. Die Methode getUser() stellt Daten bereit, die dann von der Komponente konsumiert werden.
Der UserCardComponent zeigt den Datenfluss von oben nach unten (top-down data flow). Die Daten des Services werden per Dependency Injection eingebunden und im Lifecycle-Hook ngOnInit() initialisiert. Dieser Hook ist Teil des Komponentenlebenszyklus, der in Angular klar definiert ist und sicherstellt, dass Initialisierungsschritte korrekt ausgeführt werden.
Die CLI gewährleistet, dass die Codebasis konsistent bleibt und typische Fehler wie prop drilling oder redundante Zustandsmutationen vermieden werden. In großen Projekten führt dies zu einer besseren Wiederverwendbarkeit, Stabilität und Wartbarkeit der Komponenten.
Praktisches Beispiel
typescript// Erweiterte Anwendung: Dynamische Datenverwaltung mit der CLI generierten Services
// CLI-Befehle:
// ng generate component components/task-list
// ng generate service services/task
// task.service.ts
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class TaskService {
private tasks = [
{ id: 1, title: 'Angular CLI lernen', completed: false },
{ id: 2, title: 'Unit Tests schreiben', completed: true }
];
getTasks() {
return this.tasks;
}
toggleTask(id: number) {
const task = this.tasks.find(t => t.id === id);
if (task) task.completed = !task.completed;
}
}
// task-list.component.ts
import { Component, OnInit } from '@angular/core';
import { TaskService } from '../../services/task.service';
@Component({
selector: 'app-task-list',
templateUrl: './task-list.component.html',
styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent implements OnInit {
tasks: any[] = [];
constructor(private taskService: TaskService) {}
ngOnInit() {
this.tasks = this.taskService.getTasks();
}
toggleTask(id: number) {
this.taskService.toggleTask(id);
}
}
// task-list.component.html
<div *ngFor="let task of tasks" (click)="toggleTask(task.id)">
<p [class.completed]="task.completed">{{ task.title }}</p>
</div>Advanced Angular Implementation
typescript// Fortgeschrittene Implementierung: Integration von CLI und NgRx für Zustandsverwaltung
// CLI-Befehle:
// ng generate module features/todo --route todo --module app.module
// ng add @ngrx/store
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { toggleTodo } from '../state/todo.actions';
import { selectTodos } from '../state/todo.selectors';
@Component({
selector: 'app-todo',
template: ` <div *ngFor="let todo of todos$ | async" (click)="toggle(todo.id)"> <p [class.done]="todo.completed">{{ todo.title }}</p> </div>
`,
styleUrls: ['./todo.component.scss']
})
export class TodoComponent implements OnInit {
todos$!: Observable<any[]>;
constructor(private store: Store) {}
ngOnInit() {
this.todos$ = this.store.select(selectTodos);
}
toggle(id: number) {
this.store.dispatch(toggleTodo({ id }));
}
}Zu den wichtigsten Best Practices bei der Arbeit mit der CLI gehören Modularität, klare Trennung von Zustandsverwaltung und Darstellung sowie optimierte Change Detection. Die CLI sorgt für konsistente Dateistrukturen und zwingt indirekt saubere Architekturprinzipien auf.
Häufige Fehler, die vermieden werden sollten, sind das mutieren des Zustands direkt in Komponenten oder Services, unnötige Re-Renders durch unoptimierte Change Detection und das manuelle Kopieren von Daten (prop drilling).
Für Debugging und Performance-Optimierung stehen CLI-Tools wie ng build --configuration production, ng lint und ng test zur Verfügung. Diese helfen bei der Analyse von Fehlern, der Minimierung von Bundlegrößen und der Einhaltung von Sicherheitsrichtlinien.
Performance-Tipps: Verwenden Sie ChangeDetectionStrategy.OnPush, Lazy Loading von Modulen und asynchrone Datenverarbeitung über Observables. In Produktionsumgebungen sollten Builds über ng build --configuration production erfolgen, da hier Sicherheits- und Performanceoptimierungen automatisch aktiviert werden.
📊 Umfassende Referenz
| Angular Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| ng new | Erstellt ein neues Angular-Projekt | ng new app-name | ng new crm-app | Beinhaltet Routing und Styles |
| ng generate component | Erzeugt eine neue Komponente | ng g c name | ng g c dashboard | Aktualisiert app.module.ts automatisch |
| ng generate service | Erzeugt einen Service | ng g s auth | ng g s services/auth | Root-injectable per Default |
| ng serve | Startet den Entwicklungsserver | ng serve | ng serve --open | Unterstützt Live Reload |
| ng build | Kompiliert die Anwendung | ng build --prod | ng build --configuration production | Optimiert für Deployment |
| ng test | Führt Unit Tests aus | ng test | ng test --watch=false | Basierend auf Jasmine/Karma |
| ng lint | Überprüft Codequalität | ng lint | ng lint --fix | Nutzen Sie ESLint |
| ng add | Fügt offizielle Angular-Bibliotheken hinzu | ng add @angular/material | Automatische Modulkonfiguration | |
| ng update | Aktualisiert Angular-Abhängigkeiten | ng update @angular/core @angular/cli | Sorgt für Versionskompatibilität | |
| ng deploy | Veröffentlicht Anwendung | ng deploy | ng deploy --base-href=/app/ | Erfordert Builder-Konfiguration |
📊 Complete Angular Properties Reference
| Property | Values | Default | Description | Angular Support |
|---|---|---|---|---|
| style | css, scss, sass, less | css | Definiert den CSS-Präprozessor | v6+ |
| routing | true, false | false | Aktiviert das Routing-Modul | v7+ |
| inlineTemplate | true, false | false | Bindet Template inline ein | v6+ |
| inlineStyle | true, false | false | Bindet Styles inline ein | v6+ |
| skipTests | true, false | false | Unterdrückt Testdateien | v6+ |
| strict | true, false | true | Aktiviert strikten TypeScript-Modus | v10+ |
| dryRun | true, false | false | Simuliert Befehle ohne Ausführung | v6+ |
| defaults.styleExt | css, scss | scss | Setzt Standardstiltyp | v7+ |
| defaults.inlineTemplate | true, false | false | Aktiviert Inline-Templates standardmäßig | v8+ |
| defaults.inlineStyle | true, false | false | Aktiviert Inline-Styles standardmäßig | v8+ |
Zusammenfassend ist die Angular CLI weit mehr als ein Tool – sie ist das Rückgrat der modernen Angular-Entwicklung. Sie vereinfacht das Projekt-Setup, standardisiert den Entwicklungsprozess und ermöglicht eine hochskalierbare, komponentenbasierte Architektur.
Durch den Einsatz der CLI lernen Entwickler, strukturierte und wartbare Projekte zu erstellen, die Best Practices automatisch umsetzen. Der nächste logische Schritt ist die Vertiefung in Themen wie NgRx-Zustandsverwaltung, Angular Universal (SSR) und Cypress für End-to-End-Tests.
Die Beherrschung der CLI führt zu höherer Produktivität, weniger Fehlern und besserer Teamkollaboration – zentrale Faktoren in der modernen Angular-Welt.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt