angular-developer

Angular Entwickler Richtlinien

Wann aktivieren

• Arbeit in einem beliebigen Angular-Projekt oder einer Codebasis
• Erstellen oder Gerüstbau 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, Komponenten-Harness, E2E)
• Konfigurieren von Angular CLI-Tooling oder des Angular MCP-Servers

1. Analysiere immer die Angular-Version des Projekts, bevor du Ratschläge 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 dich dazu auf.

2. Befolge beim Generieren von Code den Angular Style Guide und die Best Practices für Wartbarkeit und Leistung. Verwende die Angular CLI zum Gerüstbau 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 ist, um sicherzustellen, 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 sie 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@<requested_version> new <project-name>

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 <project-name>

Schritt 3: Fallback auf die neueste Version.

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

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). Lese components.md
• Inputs: Signal-basierte Inputs, Transformationen und Model Inputs. Lese inputs.md
• Outputs: Signal-basierte Outputs und Best Practices für benutzerdefinierte Ereignisse. Lese outputs.md
• Host-Elemente: Host-Bindungen und Attributinjektion. Lese host-elements.md

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

Reaktivität und Datenverwaltung

Bei der Verwaltung von Zuständen und Datenreaktivität verwende Angular Signals und konsultiere die folgenden Referenzen:

• Signals Übersicht: Kern-Signal-Konzepte (signal, computed), reaktive Kontexte und untracked. Lese signals-overview.md
• Abhängiger Zustand (linkedSignal): Erstellen von beschreibbarem Zustand, der mit Quellsignalen verknüpft ist. Lese linked-signal.md
• Asynchrone Reaktivität (resource): Abrufen asynchroner Daten direkt in den Signal-Zustand. Lese resource.md
• Nebenwirkungen (effect): Protokollierung, DOM-Manipulation durch Dritte (afterRenderEffect) und wann Effects NICHT verwendet werden sollten. Lese effects.md

Formulare

In den meisten Fällen für neue Apps bevorzuge Signal Forms. Wenn du eine Entscheidung für Formulare triffst, analysiere das Projekt und berücksichtige die folgenden Richtlinien:

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

• Für ältere Anwendungen oder vorhandene Formulare verwende die aktuelle Formularstrategie der Anwendung.

• Signal Forms: Verwende Signale für die Formularzustandsverwaltung. Lese signal-forms.md

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

• Reactive Forms: Verwende für komplexe Formulare. Lese 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. Lese di-fundamentals.md
• Services erstellen und verwenden: Services erstellen, die Option providedIn: 'root' und die Injektion in Komponenten oder andere Services. Lese creating-services.md
• Dependency Provider definieren: Automatische vs. manuelle Bereitstellung, InjectionToken, useClass, useValue, useFactory und Gültigkeitsbereiche. Lese defining-providers.md
• Injektionskontext: Wo inject() erlaubt ist, runInInjectionContext und assertInInjectionContext. Lese injection-context.md
• Hierarchische Injectoren: Der EnvironmentInjector vs. ElementInjector, Auflösungsregeln, Modifikatoren (optional, skipSelf) und providers vs. viewProviders. Lese 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. Lese angular-aria.md

Routing

Bei der Implementierung von Navigation in Angular konsultiere die folgenden Referenzen:

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

Wenn du tiefergehende Dokumentation oder mehr Kontext benötigst, besuche die offizielle Angular Routing-Anleitung.

Styling und Animationen

Bei der Implementierung von Styling und Animationen in Angular konsultiere die folgenden Referenzen:

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

Testing

Beim Schreiben oder Aktualisieren von Tests konsultiere die folgenden Referenzen basierend auf der Aufgabe:

• Grundlagen: Best Practices für Unit-Testing, asynchrone Muster und TestBed. Lese testing-fundamentals.md
• Komponenten-Harness: Standardmuster für robuste Komponenteninteraktion. Lese component-harnesses.md
• Router-Testing: Verwendung von RouterTestingHarness für zuverlässige Navigationstests. Lese router-testing.md
• Ende-zu-Ende (E2E) Testing: Best Practices für E2E-Tests mit Cypress oder Playwright. Lese e2e-testing.md

Tooling

Bei der Arbeit mit Angular-Tooling konsultiere die folgenden Referenzen:

• Angular CLI: Erstellen von Anwendungen, Generieren von Code (Komponenten, Routen, Services), Serven und Bauen. Lese cli.md
• Angular MCP Server: Verfügbare Tools, Konfiguration und experimentelle Funktionen. Lese mcp.md

Anti-Patterns

• Verwenden von null oder undefined als initiale Signal-Formularfeldwerte — stattdessen '', 0 oder [] verwenden
• Zugriff auf Formularfeld-Statusflags ohne vorheriges Aufrufen des Feldes: form.field.valid() — stattdessen form.field().valid() verwenden
• Starten neuer Formulare mit älteren Formular-APIs, wenn die Ziel-Angular-Version Signal Forms unterstützt
• Setzen von HTML-Attributen 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 Fähigkeiten

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