angular-developer

Angular Entwicklerrichtlinien

Wann aktivieren

• Arbeiten in einem beliebigen Angular-Projekt oder einer Codebasis
• Erstellen oder Scaffolding eines neuen Angular-Projekts, einer Anwendung oder Bibliothek
• Generieren von Komponenten, Services, Direktiven, Pipes, Guards oder Resolvern
• Implementieren von Reaktivität mit Angular Signals, linkedSignal oder resource
• Arbeiten mit Angular-Formularen (Signal Forms, Reactive Forms oder Template-driven)
• Einrichten von Dependency Injection, Routing, Lazy Loading oder Route Guards
• Hinzufügen von Barrierefreiheit (ARIA), Animationen oder Komponenten-Styling
• Schreiben oder Debuggen von Angular-spezifischen Tests (Unit, Component Harness, E2E)
• Konfigurieren der Angular CLI oder des Angular MCP Servers

1. Analysiere immer die Angular-Version des Projekts, bevor du Anleitungen gibst, da Best Practices und verfügbare Funktionen zwischen den Versionen erheblich variieren können. Wenn du ein neues Projekt mit der Angular CLI erstellst, gib keine Version an, es sei denn, der Benutzer fordert dies explizit.

2. Befolge beim Generieren von Code den Angular Style Guide und die Best Practices für Wartbarkeit und Leistung. Verwende die Angular CLI zum Erstellen von Komponenten, Services, Direktiven, Pipes und Routen, um Konsistenz zu gewährleisten.

3. Führe nach dem Generieren von Code ng build aus, um sicherzustellen, dass keine Build-Fehler auftreten. Wenn Fehler auftreten, analysiere die Fehlermeldungen und behebe sie, bevor du fortfährst. Überspringe diesen Schritt nicht, da er entscheidend dafür ist, dass der generierte Code korrekt und funktionsfähig ist.

Neue Projekte erstellen

Wenn der Benutzer keine Richtlinien vorgibt, verwende diese Standardeinstellungen beim Erstellen eines neuen Angular-Projekts:

1. Verwende die neueste stabile Version von Angular, sofern der Benutzer nichts anderes angibt.
2. Bevorzuge Signal Forms für neue Projekte nur, wenn die Ziel-Angular-Version diese unterstützt. Weitere Informationen.

Ausführungsregeln für ng new: Wenn du aufgefordert wirst, ein neues Angular-Projekt zu erstellen, musst du den korrekten Ausführungsbefehl ermitteln, indem du diese strengen Schritte befolgst:

Schritt 1: Prüfe auf eine explizite Benutzerversion.

• WENN der Benutzer eine bestimmte Version anfordert (z. B. Angular 15), umgehe lokale Installationen und verwende strikt npx.
• Befehl: npx @angular/cli@<gewuenschte_version> new <projektname>

Schritt 2: Prüfe auf eine vorhandene Angular-Installation.

• WENN keine bestimmte Version angefordert wird, führe ng version im Terminal aus, um zu prüfen, ob die Angular CLI bereits auf dem System installiert ist.
• WENN der Befehl erfolgreich ist und eine installierte Version zurückgibt, verwende die lokale/globale Installation direkt.
• Befehl: ng new <projektname>

Schritt 3: Fallback auf Latest.

• WENN keine bestimmte Version angefordert wird UND der Befehl ng version fehlschlägt (was bedeutet, dass keine Angular-Installation vorhanden ist), musst du npx verwenden, um die neueste Version zu holen.
• Befehl: npx @angular/cli@latest new <projektname>

Komponenten

Wenn du mit Angular-Komponenten arbeitest, konsultiere die folgenden Referenzen basierend auf der Aufgabe:

• Grundlagen: Anatomie, Metadaten, Kernkonzepte und Template-Kontrollfluss (@if, @for, @switch). Lies components.md
• Inputs: Signal-basierte Inputs, Transformationen und Model Inputs. Lies inputs.md
• Outputs: Signal-basierte Outputs und Best Practices für benutzerdefinierte Ereignisse. Lies outputs.md
• Host-Elemente: Host-Bindungen und Attribut-Injektion. Lies host-elements.md

Wenn du tiefergehende Dokumentation benötigst, die in den obigen Referenzen nicht enthalten ist, lies die Dokumentation unter https://angular.dev/guide/components.

Reaktivität und Datenverwaltung

Wenn du Zustands- und Datenreaktivität verwaltest, verwende Angular Signals und konsultiere die folgenden Referenzen:

• Signals-Überblick: Kernkonzepte von Signals (signal, computed), reaktive Kontexte und untracked. Lies signals-overview.md
• Abhängiger Zustand (linkedSignal): Erstellen von beschreibbarem Zustand, der mit Quell-Signals verknüpft ist. Lies linked-signal.md
• Asynchrone Reaktivität (resource): Abrufen asynchroner Daten direkt in den Signal-Zustand. Lies resource.md
• Seiteneffekte (effect): Protokollierung, Drittanbieter-DOM-Manipulation (afterRenderEffect) und wann effect NICHT verwendet werden sollte. Lies effects.md

Formulare

In den meisten Fällen für neue Apps bevorzuge Signal Forms. Triff bei der Entscheidungsfindung für Formulare eine Analyse des Projekts und berücksichtige die folgenden Richtlinien:

• Wenn die Anwendungsversion Signal Forms unterstützt und es sich um ein neues Formular handelt, bevorzuge Signal Forms.

• Verwende für ältere Anwendungen oder bestehende Formulare die aktuelle Formularstrategie der Anwendung.

• Signal Forms: Verwende Signals für die Formularzustandsverwaltung. Lies signal-forms.md

• Template-driven Forms: Verwende für einfache Formulare. Lies template-driven-forms.md

• Reactive Forms: Verwende für komplexe Formulare. Lies reactive-forms.md

Dependency Injection

Befolge bei der Implementierung von Dependency Injection in Angular diese Richtlinien:

• Grundlagen: Überblick über Dependency Injection, Services und die inject()-Funktion. Lies di-fundamentals.md
• Services erstellen und verwenden: Services erstellen, die Option providedIn: 'root' und das Injizieren in Komponenten oder andere Services. Lies creating-services.md
• Dependency-Provider definieren: Automatische vs. manuelle Bereitstellung, InjectionToken, useClass, useValue, useFactory und Gültigkeitsbereiche. Lies defining-providers.md
• Injektionskontext: Wo inject() erlaubt ist, runInInjectionContext und assertInInjectionContext. Lies injection-context.md
• Hierarchische Injectoren: EnvironmentInjector vs. ElementInjector, Auflösungsregeln, Modifikatoren (optional, skipSelf) und providers vs. viewProviders. Lies hierarchical-injectors.md

Angular Aria

Beim Erstellen barrierefreier, benutzerdefinierter Komponenten für eines der folgenden Muster: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, konsultiere die folgende Referenz:

• Angular Aria Komponenten: Erstellen von Headless-, barrierefreien Komponenten (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) und Styling von ARIA-Attributen. Lies angular-aria.md

Routing

Konsultiere bei der Implementierung der Navigation in Angular die folgenden Referenzen:

• Routen definieren: URL-Pfade, statische vs. dynamische Segmente, Platzhalter und Weiterleitungen. Lies define-routes.md
• Ladestrategien für Routen: Eager vs. Lazy Loading und kontextabhängiges Laden. Lies loading-strategies.md
• Routen mit Outlets anzeigen: Verwendung von <router-outlet>, verschachtelten Outlets und benannten Outlets. Lies show-routes-with-outlets.md
• Zu Routen navigieren: Deklarative Navigation mit RouterLink und programmatische Navigation mit Router. Lies navigate-to-routes.md
• Zugriff auf Routen mit Guards steuern: Implementieren von CanActivate, CanMatch und anderen Guards für die Sicherheit. Lies route-guards.md
• Data Resolver: Vorab-Datenabruf vor der Routenaktivierung mit ResolveFn. Lies data-resolvers.md
• Router-Lebenszyklus und Ereignisse: Chronologische Reihenfolge von Navigationsereignissen und Debugging. Lies router-lifecycle.md
• Rendering-Strategien: CSR, SSG (Pre-Rendering) und SSR mit Hydration. Lies rendering-strategies.md
• Routenübergangs-Animationen: Aktivieren und Anpassen der View Transitions API. Lies route-animations.md

Bei Bedarf an tiefergehender Dokumentation oder mehr Kontext besuche den offiziellen Angular Routing-Leitfaden.

Styling und Animationen

Konsultiere bei der Implementierung von Styling und Animationen in Angular die folgenden Referenzen:

• Tailwind CSS mit Angular verwenden: Integration von Tailwind CSS in Angular-Projekte. Lies tailwind-css.md
• Angular Animationen: Verwendung von nativem CSS (empfohlen) oder der Legacy-DSL für dynamische Effekte. Lies angular-animations.md
• Komponenten stylen: Best Practices für Komponenten-Styles und -Kapselung. Lies component-styling.md

Testen

Konsultiere beim Schreiben oder Aktualisieren von Tests die folgenden Referenzen basierend auf der Aufgabe:

• Grundlagen: Best Practices für Unit-Tests, asynchrone Muster und TestBed. Lies testing-fundamentals.md
• Component Harnesses: Standardmuster für robuste Komponenteninteraktion. Lies component-harnesses.md
• Router-Tests: Verwendung von RouterTestingHarness für zuverlässige Navigationstests. Lies router-testing.md
• End-to-End (E2E) Tests: Best Practices für E2E-Tests mit Cypress oder Playwright. Lies e2e-testing.md

Tooling

Konsultiere bei der Arbeit mit Angular-Tools die folgenden Referenzen:

• Angular CLI: Anwendungen erstellen, Code generieren (Komponenten, Routen, Services), bereitstellen und bauen. Lies cli.md
• Angular MCP Server: Verfügbare Tools, Konfiguration und experimentelle Funktionen. Lies mcp.md

Anti-Patterns

• Verwendung von null oder undefined als initiale Signal-Formularfeldwerte – stattdessen '', 0 oder [] verwenden
• Zugriff auf Status-Flags von Formularfeldern, ohne das Feld zuvor aufzurufen: form.field.valid() – form.field().valid() verwenden
• Beginnen neuer Formulare mit älteren Formular-APIs, wenn die Ziel-Angular-Version Signal Forms unterstützt
• Setzen der HTML-Attribute min, max, value, disabled oder readonly auf [formField]-Inputs – diese stattdessen als Schema-Regeln definieren
• Aufrufen von inject() außerhalb eines Injektionskontexts – bei Bedarf runInInjectionContext verwenden
• Verwenden von effect() für abgeleiteten Zustand, der computed() verwenden sollte
• Referenzieren von $parent.$index in verschachtelten @for-Schleifen – Angular unterstützt $parent nicht; stattdessen let outerIdx = $index verwenden

Verwandte Skills

• tdd-workflow – Testgetriebener Entwicklungsworkflow, anwendbar auf Angular-Komponenten und -Services
• security-review – Sicherheitscheckliste für Webanwendungen inklusive Angular-spezifischer Aspekte
• frontend-patterns – Allgemeine Frontend-Muster für Kontext zu React/Next.js-Ansätzen