Claude Code Angular: Komponenten, Services und Migration auf Knopfdruck

Angular ist eines der ausgefeiltesten TypeScript-Frameworks — und gleichzeitig eines der steilsten. Dependency Injection, Decorators, RxJS-Observables, Module-System, Change Detection: Wer neu einsteigt, verwaltet mehr Konzepte gleichzeitig als in fast jedem anderen Web-Framework. Wer ein bestehendes Projekt migriert, kennt das Gefühl, gegen eine Wand aus NgModule-Deklarationen und zirkulären Abhängigkeiten zu kämpfen.

Claude Code Angular verändert diesen Workflow grundlegend. Nicht weil es Angular-Konzepte vereinfacht — die bleiben komplex — sondern weil es den gesamten Projektkontext auf einmal sieht: alle Komponenten, alle Module, alle Service-Abhängigkeiten. Dieser Artikel zeigt, was das konkret bedeutet.

1. Was ist Angular?

Angular ist ein von Google entwickeltes, vollständiges TypeScript-Framework für Single-Page-Applications. Im Gegensatz zu React oder Vue liefert Angular alles aus einer Hand: Routing, HTTP-Client, Formular-Handling, Testing-Utils und ein striktes Architekturmuster. Das macht Angular in Unternehmen beliebt — und in kleineren Teams manchmal überdimensioniert.

Die Kernideen: Component-based Architecture (jedes UI-Element ist eine Klasse mit Decorator), Dependency Injection (Services werden nie manuell instanziiert, sondern vom Injector bereitgestellt) und TypeScript-first (nicht optional, sondern erzwungen). Ab Angular 17 kommen Signals als neue reactive primitive dazu — eine deutliche Vereinfachung gegenüber dem reinen RxJS-Ansatz.

2. Components und Templates: Das Herz jeder Angular-App

Jede Angular-Ansicht ist eine Komponente: eine TypeScript-Klasse mit dem Decorator @Component, einem HTML-Template und optionalem CSS. Die Klasse definiert Daten und Methoden, das Template rendert sie.

@Component({
  selector: 'app-product-card',
  standalone: true,
  imports: [CommonModule, RouterLink],
  template: `
    <div class="card" [class.featured]="product.featured">
      <h2>{{ product.name }}</h2>
      <p>{{ product.price | currency:'EUR' }}</p>
      <ul>
        <li *ngFor="let tag of product.tags">{{ tag }}</li>
      </ul>
      <button *ngIf="product.available" (click)="addToCart()">
        In den Warenkorb
      </button>
    </div>
  `
})
export class ProductCardComponent {
  @Input() product!: Product;
  @Output() cartAdded = new EventEmitter<Product>();

  addToCart() {
    this.cartAdded.emit(this.product);
  }
}

Die Template-Syntax ist Angular-spezifisch: {{ expr }} für Interpolation, [attr]="expr" für Property-Binding, (event)="handler()" für Events. Die Direktiven *ngIf und *ngFor steuern bedingtes Rendering und Listen. ngClass und ngStyle erlauben dynamisches Styling.

Claude Code: Komponenten auf Befehl generieren

Statt Boilerplate von Hand zu schreiben, lässt sich Claude Code direkt beauftragen:

claude "Erstelle eine standalone Angular-Komponente 'UserProfile' mit:
- Input: userId (string)
- Lädt Nutzerdaten via UserService
- Zeigt Avatar, Name, E-Mail
- Skeleton-Loading während des Ladens
- Fehlermeldung bei Fehler"

Claude Code liest dabei selbstständig bestehende Komponenten im Projekt, erkennt die verwendeten Patterns (CSS-Klassen-Konventionen, bestehende Service-Interfaces, Import-Struktur) und generiert eine Komponente, die konsistent mit dem Rest der Codebase aussieht — nicht einen generischen Template-Output.

3. Services und Dependency Injection

Angular-Services sind Klassen mit @Injectable() und enthalten die Business-Logik: HTTP-Calls, State-Management, Utilities. Der Injector instanziiert sie einmalig (Singleton) und stellt sie überall bereit, wo sie als Konstruktor-Parameter deklariert werden.

@Injectable({ providedIn: 'root' })
export class ProductService {
  private http = inject(HttpClient);
  private apiUrl = '/api/products';

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl).pipe(
      catchError(err => {
        console.error('Fehler beim Laden der Produkte', err);
        return throwError(() => err);
      })
    );
  }

  getProduct(id: string): Observable<Product> {
    return this.http.get<Product>(`${this.apiUrl}/${id}`);
  }
}

providedIn: 'root' macht den Service global verfügbar ohne ihn in einem Modul zu deklarieren. inject() ist die moderne Alternative zum Konstruktor-Parameter-Ansatz — funktioniert seit Angular 14 und ist kompakter. RxJS-Operatoren wie pipe(), catchError() und map() formen den Datenstrom.

4. Routing: RouterModule, Guards und Lazy Loading

Angular Router definiert, welche Komponente bei welchem URL-Pfad gerendert wird. Seit Angular 17 ist der funktionale Ansatz bevorzugt — keine Klassen mehr für Guards und Resolver, sondern einfache Funktionen:

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'products',
    loadComponent: () =>
      import('./products/product-list.component')
        .then(m => m.ProductListComponent),
    canActivate: [authGuard]
  },
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.routes').then(m => m.adminRoutes),
    canActivate: [() => inject(AuthService).isAdmin()]
  },
  { path: '**', redirectTo: '' }
];

Lazy Loading mit loadComponent und loadChildren ist Standard: Angular lädt den Code für eine Route erst, wenn der Nutzer sie aufruft. Das reduziert den initialen Bundle-Size erheblich. Route Guards als Inline-Funktionen (canActivate: [() => ...]) ersetzen die verbose Klassen-Guard-Syntax.

5. State Management: Signals und NgRx

Angular 17+ bringt Signals als eingebettetes reaktives Primitiv — keine externe Library nötig für einfache State-Fälle:

@Component({ ... })
export class CartComponent {
  private cartService = inject(CartService);

  // Signal: reaktiver Wert
  items = this.cartService.items; // Signal<CartItem[]>

  // Computed Signal: abgeleiteter Wert
  total = computed(() =>
    this.items().reduce((sum, item) => sum + item.price * item.qty, 0)
  );

  // Effect: Seiteneffekt bei Signal-änderung
  constructor() {
    effect(() => {
      console.log('Cart updated:', this.items().length, 'items');
    });
  }
}

Für komplexere Anwendungen mit vielen Slices, DevTools-Integration und strikter Unidirektionalität bleibt NgRx Store die erste Wahl. Claude Code versteht beide Ansätze und empfiehlt je nach Projektgröße: Signals für lokalen und geteilten State in mittelgroßen Apps, NgRx für Enterprise-Projekte mit komplexen Workflows.

6. Formulare: Reactive Forms mit FormBuilder

Angular-Formulare in der reaktiven Variante definieren die Struktur im TypeScript, nicht im Template. Das macht Validierung, dynamische Felder und Unit-Tests erheblich einfacher:

@Component({ ... })
export class CheckoutFormComponent {
  private fb = inject(FormBuilder);

  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    address: this.fb.group({
      street: ['', Validators.required],
      city: ['', Validators.required],
      zip: ['', [Validators.required, Validators.pattern(/^\d{5}$/)]]
    }),
    paymentMethod: ['card', Validators.required]
  });

  submit() {
    if (this.form.invalid) return;
    const value = this.form.getRawValue();
    // value ist vollständig typisiert
  }
}

Im Template: [formGroup]="form" und formControlName="email" verbinden Template mit dem TypeScript-Modell. Fehlerzustände sind per form.get('email')?.errors jederzeit lesbar — ideal für reaktive Fehlermeldungen.

7. Claude Code Angular: Konkrete Einsatzszenarien

Komponenten aus Anforderungen generieren

Statt Angular CLI-Befehle zu kombinieren und Boilerplate zu schreiben:

claude "Erstelle alle nötigen Komponenten für einen Checkout-Flow:
1. Cart-Summary (nur Anzeige)
2. Address-Form (reaktiv, mit PLZ-Validierung)
3. Payment-Selection (Radio-Gruppe, PayPal/Karte)
4. Order-Confirmation (mit Order-ID aus Route-Params)
Alle standalone, mit passenden Interfaces in types/checkout.ts"

NgModule-Chaos auflösen

Viele ältere Angular-Projekte haben gewachsene Module mit zirkulären Abhängigkeiten und unklaren Exports. Claude Code analysiert die gesamte Modulstruktur und erklärt, welche Teile sich überschneiden:

claude "Analysiere die NgModule-Struktur in src/app und erkläre:
1. Welche Module importieren sich gegenseitig?
2. Welche Deklarationen werden in mehreren Modulen dupliziert?
3. Was kann sicher zusammengeführt oder entfernt werden?"

Migration auf Standalone Components

Das ist der stärkste Claude Code Angular Anwendungsfall: die Migration von NgModule-basiertem Code auf Standalone Components ist mechanisch, aber fehleranfällig. Claude Code führt sie systematisch durch:

claude "Migriere src/app/products/ auf Standalone Components:
- Entferne NgModule-Deklarationen
- Füge standalone: true und imports[] zu jedem @Component hinzu
- Behalte alle bestehenden Tests grün"

"Die Migration von 23 Komponenten in unserem Produktmodul hat Claude Code in einem Durchgang erledigt — inklusive der Importe die vorher implizit über SharedModule kamen. Manuell wäre das ein halber Tag gewesen."

RxJS-Ketten verstehen und vereinfachen

Komplexe Observable-Ketten mit verschachtelten switchMap, combineLatest und withLatestFrom sind schwer zu lesen. Claude Code erklärt sie und schlägt vereinfachte Varianten vor:

claude "Erklär mir diese RxJS-Kette Schritt für Schritt und zeig mir,
ob sie mit Signals aus Angular 17 vereinfacht werden kann:
[Code einfügen]"

Zwei verwandte Artikel:

• Claude Code Debugging — Bugs systematisch finden statt Trial-and-Error
• Claude Code für Unternehmen — Team-Workflows, Deployment und Zugriffskontrolle