dev-goraebap/krill

Angular-Entwicklerrichtlinien

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

2. Beim Generieren von Code befolge Angulars Style Guide und Best Practices für Wartbarkeit und Leistung. Verwende die Angular-CLI für das Gerüst von Komponenten, Services, Directives, Pipes und Routen, um Konsistenz zu gewährleisten.

3. Nachdem du die Codegenerierung abgeschlossen hast, führe 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 keine Richtlinien vom Benutzer bereitgestellt werden, findest du hier einige Standardregeln, die beim Erstellen eines neuen Angular-Projekts zu befolgen sind:

1. Verwende die neueste stabile Version von Angular, sofern der Benutzer nichts anderes angibt.
2. Verwende Signal Forms für die Formularverwaltung in neuen Projekten (verfügbar in Angular v21 und neuer) Weitere Informationen.

Ausführungsregeln für ng new: Wenn du aufgefordert wirst, ein neues Angular-Projekt zu erstellen, musst du den korrekten Ausführungsbefehl bestimmen, 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 abzurufen.
• 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
• Eingaben: Signalbasierte Eingaben, Transformationen und Model-Eingaben. Lese inputs.md
• Ausgaben: Signalbasierte Ausgaben und Best Practices für benutzerdefinierte Ereignisse. Lese outputs.md
• Host-Elemente: Host-Bindungen und Attributinjektion. Lese host-elements.md

Wenn du eine tiefere 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: Kernkonzepte von Signals (signal, computed), reaktive Kontexte und untracked. Lese signals-overview.md
• Abhängiger Zustand (linkedSignal): Erstellen eines beschreibbaren Zustands, 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
• Seiteneffekte (effect): Protokollierung, DOM-Manipulation durch Dritte (afterRenderEffect) und wann Effekte NICHT verwendet werden sollten. Lese effects.md

HTTP-Kommunikation

Bei der Kommunikation mit Backend-Diensten verwende Angular-HTTP-APIs und konsultiere die folgende Referenz:

• HTTP-Client und Ressourcen: provideHttpClient, HttpClient, Interceptors und httpResource. Lese http-client.md

Formulare

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

• Wenn die Anwendung v21 oder neuer verwendet und dies ein neues Formular ist, bevorzuge Signal Forms.

• Verwende für ältere Anwendungen oder bei der Arbeit mit vorhandenen Formularen den entsprechenden Formulartyp, der der aktuellen Formularstrategie der Anwendung entspricht.

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

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

• Reaktive Formulare: Verwende für komplexe Formulare. Lese reactive-forms.md

Abhängigkeitsinjektion

Befolge bei der Implementierung der Abhängigkeitsinjektion in Angular diese Richtlinien:

• Grundlagen: Übersicht über die Abhängigkeitsinjektion, Services und die inject()-Funktion. Lese di-fundamentals.md
• Erstellen und Verwenden von Services: Services erstellen, die Option providedIn: 'root' und die Injektion in Komponenten oder andere Services. Lese creating-services.md
• Definieren von Abhängigkeitsanbietern: 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 Injektoren: Der EnvironmentInjector vs. ElementInjector, Auflösungsregeln, Modifikatoren (optional, skipSelf) und providers vs. viewProviders. Lese hierarchical-injectors.md

Pipes

Beim Formatieren von Werten in Templates, Erstellen benutzerdefinierter Pipes oder Wiederverwenden von Pipe-ähnlicher Logik in TypeScript konsultiere die folgende Referenz. Bevorzuge Pipes in Templates; vermeide außerhalb von Templates die Injektion von Pipe-Klassen, um nur transform() aufzurufen.

• Pipes: Integrierte Pipe-Importe, benutzerdefinierte Pipe-Benennung und -Implementierung, reine vs. unreine Pipes und TypeScript-Wiederverwendungsmuster mit eigenständigen Formatierungsfunktionen oder extrahierten einfachen Funktionen. Lese pipes.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 Gestalten 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: Verwenden von <router-outlet>, verschachtelten Outlets und benannten 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: Implementieren von CanActivate, CanMatch und anderen Guards für die Sicherheit. Lese route-guards.md
• Daten-Resolver: Vorabrufen von Daten vor der Routenaktivierung mit ResolveFn. Lese data-resolvers.md
• Router-Lebenszyklus und Ereignisse: Chronologische Reihenfolge der Navigationsereignisse und Debugging. Lese router-lifecycle.md
• Rendering-Strategien: CSR, SSG (Prerendering) und SSR mit Hydrierung. Lese rendering-strategies.md
• Routen-Übergangsanimationen: Aktivieren und Anpassen der View-Transitions-API. Lese route-animations.md

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

Gestaltung und Animationen

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

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

Testen

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

• Grundlagen: Best Practices für Unit-Tests (Vitest), asynchrone Muster und TestBed. Lese testing-fundamentals.md
• Komponenten-Harnesses: Standardmuster für robuste Komponenteninteraktion. Lese component-harnesses.md
• Router-Tests: Verwenden von RouterTestingHarness für zuverlässige Navigationstests. Lese router-testing.md
• End-to-End (E2E)-Tests: Einrichten und Ausführen von E2E-Tests. Lese e2e-testing.md

Werkzeuge

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

• Angular-CLI: Erstellen von Anwendungen, Generieren von Code (Komponenten, Routen, Services), Bereitstellen und Bauen. Lese cli.md
• Code-Modernisierung: Automatisches Refaktorisieren auf moderne Standards durch Migrationen. Lese migrations.md
• Angular-MCP-Server: Verfügbare Tools, Konfiguration und experimentelle Funktionen. Lese mcp.md
• Umgebungskonfiguration: Strategien für Build-Zeit- und Laufzeitkonfiguration. Lese environment-configuration.md