dev-goraebap/krill

Directives pour développeurs Angular

1. Analysez toujours la version d'Angular du projet avant de fournir des conseils, car les bonnes pratiques et les fonctionnalités disponibles peuvent varier considérablement selon les versions. Si vous créez un nouveau projet avec Angular CLI, ne spécifiez pas de version à moins que l'utilisateur ne le demande.

2. Lors de la génération de code, suivez le guide de style d'Angular et les bonnes pratiques pour la maintenabilité et les performances. Utilisez Angular CLI pour générer des composants, services, directives, pipes et routes afin d'assurer la cohérence.

3. Une fois que vous avez fini de générer du code, exécutez ng build pour vous assurer qu'il n'y a pas d'erreurs de build. S'il y a des erreurs, analysez les messages d'erreur et corrigez-les avant de continuer. Ne sautez pas cette étape, car elle est essentielle pour garantir que le code généré est correct et fonctionnel.

Création de nouveaux projets

Si l'utilisateur ne fournit aucune directive, voici quelques règles par défaut à suivre lors de la création d'un nouveau projet Angular :

1. Utilisez la version stable la plus récente d'Angular, sauf indication contraire de l'utilisateur.
2. Utilisez les formulaires Signals pour la gestion des formulaires dans les nouveaux projets (disponibles dans Angular v21 et versions ultérieures) En savoir plus.

Règles d'exécution pour ng new : Lorsqu'on vous demande de créer un nouveau projet Angular, vous devez déterminer la commande d'exécution correcte en suivant ces étapes strictes :

Étape 1 : Vérifier une version explicite demandée par l'utilisateur.

• SI l'utilisateur demande une version spécifique (par exemple, Angular 15), ignorez les installations locales et utilisez strictement npx.
• Commande : npx @angular/cli@<version_demandée> new <nom-du-projet>

Étape 2 : Vérifier une installation Angular existante.

• SI aucune version spécifique n'est demandée, exécutez ng version dans le terminal pour vérifier si Angular CLI est déjà installé sur le système.
• SI la commande réussit et renvoie une version installée, utilisez l'installation locale/globale directement.
• Commande : ng new <nom-du-projet>

Étape 3 : Repli vers la version la plus récente.

• SI aucune version spécifique n'est demandée ET que la commande ng version échoue (indiquant qu'aucune installation Angular n'existe), vous devez utiliser npx pour obtenir la version la plus récente.
• Commande : npx @angular/cli@latest new <nom-du-projet>

Composants

Lorsque vous travaillez avec des composants Angular, consultez les références suivantes en fonction de la tâche :

• Fondamentaux : Anatomie, métadonnées, concepts de base et flux de contrôle dans les templates (@if, @for, @switch). Lisez components.md
• Entrées : Entrées basées sur les signaux, transformations et entrées de modèle. Lisez inputs.md
• Sorties : Sorties basées sur les signaux et bonnes pratiques pour les événements personnalisés. Lisez outputs.md
• Éléments hôtes : Liaisons d'hôte et injection d'attributs. Lisez host-elements.md

Si vous avez besoin d'une documentation plus approfondie que celle fournie dans les références ci-dessus, lisez la documentation à l'adresse https://angular.dev/guide/components.

Réactivité et gestion des données

Lors de la gestion de l'état et de la réactivité des données, utilisez les signaux Angular et consultez les références suivantes :

• Vue d'ensemble des signaux : Concepts de base des signaux (signal, computed), contextes réactifs et untracked. Lisez signals-overview.md
• État dépendant (linkedSignal) : Création d'un état modifiable lié à des signaux sources. Lisez linked-signal.md
• Réactivité asynchrone (resource) : Récupération de données asynchrones directement dans l'état du signal. Lisez resource.md
• Effets secondaires (effect) : Journalisation, manipulation DOM par des tiers (afterRenderEffect), et quand NE PAS utiliser les effets. Lisez effects.md

Communication HTTP

Lors de la communication avec des services backend, utilisez les API HTTP d'Angular et consultez la référence suivante :

• Client HTTP et ressources : provideHttpClient, HttpClient, intercepteurs, et httpResource. Lisez http-client.md

Formulaires

Dans la plupart des cas pour les nouvelles applications, préférez les formulaires par signaux. Lors de la prise de décision concernant les formulaires, analysez le projet et tenez compte des directives suivantes :

• Si l'application utilise v21 ou une version ultérieure et qu'il s'agit d'un nouveau formulaire, préférez les formulaires par signaux.

• Pour les applications plus anciennes ou lorsque vous travaillez avec des formulaires existants, utilisez le type de formulaire approprié qui correspond à la stratégie actuelle de l'application.

• Formulaires par signaux : Utilisez les signaux pour la gestion de l'état du formulaire. Lisez signal-forms.md

• Formulaires pilotés par les templates : Utilisez pour les formulaires simples. Lisez template-driven-forms.md

• Formulaires réactifs : Utilisez pour les formulaires complexes. Lisez reactive-forms.md

Injection de dépendances

Lors de l'implémentation de l'injection de dépendances dans Angular, suivez ces directives :

• Fondamentaux : Vue d'ensemble de l'injection de dépendances, services et fonction inject(). Lisez di-fundamentals.md
• Création et utilisation de services : Création de services, option providedIn: 'root', et injection dans des composants ou d'autres services. Lisez creating-services.md
• Définition des fournisseurs de dépendances : Provision automatique vs manuelle, InjectionToken, useClass, useValue, useFactory, et portées. Lisez defining-providers.md
• Contexte d'injection : Où inject() est autorisé, runInInjectionContext, et assertInInjectionContext. Lisez injection-context.md
• Injecteurs hiérarchiques : EnvironmentInjector vs ElementInjector, règles de résolution, modificateurs (optional, skipSelf), et providers vs viewProviders. Lisez hierarchical-injectors.md

Pipes

Lors du formatage de valeurs dans les templates, de la création de pipes personnalisés ou de la réutilisation de logique de type pipe en TypeScript, consultez la référence suivante. Préférez les pipes dans les templates ; en dehors des templates, évitez d'injecter des classes de pipe uniquement pour appeler transform().

• Pipes : Importations de pipes intégrés, nommage et implémentation de pipes personnalisés, pipes purs vs impurs, et motifs de réutilisation en TypeScript utilisant des fonctions de formatage autonomes ou des fonctions simples extraites. Lisez pipes.md

Angular Aria

Lors de la création de composants accessibles personnalisés pour l'un des modèles suivants : Accordéon, Listbox, Combobox, Menu, Onglets, Barre d'outils, Arborescence, Grille, consultez la référence suivante :

• Composants Angular Aria : Création de composants accessibles sans tête (Accordéon, Listbox, Combobox, Menu, Onglets, Barre d'outils, Arborescence, Grille) et stylisation des attributs ARIA. Lisez angular-aria.md

Routage

Lors de l'implémentation de la navigation dans Angular, consultez les références suivantes :

• Définir les routes : Chemins d'URL, segments statiques vs dynamiques, caractères génériques et redirections. Lisez define-routes.md
• Stratégies de chargement des routes : Chargement eager vs lazy, et chargement contextuel. Lisez loading-strategies.md
• Afficher les routes avec les outlets : Utilisation de <router-outlet>, outlets imbriqués et outlets nommés. Lisez show-routes-with-outlets.md
• Naviguer vers les routes : Navigation déclarative avec RouterLink et navigation programmatique avec Router. Lisez navigate-to-routes.md
• Contrôler l'accès aux routes avec les guards : Implémentation de CanActivate, CanMatch et autres guards pour la sécurité. Lisez route-guards.md
• Résolveurs de données : Préchargement des données avant l'activation de la route avec ResolveFn. Lisez data-resolvers.md
• Cycle de vie du routeur et événements : Ordre chronologique des événements de navigation et débogage. Lisez router-lifecycle.md
• Stratégies de rendu : CSR, SSG (Prerendering) et SSR avec hydratation. Lisez rendering-strategies.md
• Animations de transition de route : Activation et personnalisation de l'API View Transitions. Lisez route-animations.md

Si vous avez besoin d'une documentation plus approfondie ou de plus de contexte, consultez le guide officiel de routage Angular.

Styles et animations

Lors de l'implémentation de styles et d'animations dans Angular, consultez les références suivantes :

• Utilisation de Tailwind CSS avec Angular : Intégration de Tailwind CSS dans les projets Angular. Lisez tailwind-css.md
• Animations Angular : Utilisation du CSS natif (recommandé) ou du DSL hérité pour les effets dynamiques. Lisez angular-animations.md
• Stylisation des composants : Bonnes pratiques pour les styles de composants et l'encapsulation. Lisez component-styling.md

Tests

Lors de la rédaction ou de la mise à jour de tests, consultez les références suivantes en fonction de la tâche :

• Fondamentaux : Bonnes pratiques pour les tests unitaires (Vitest), motifs asynchrones et TestBed. Lisez testing-fundamentals.md
• Harnesses de composants : Motifs standard pour une interaction robuste avec les composants. Lisez component-harnesses.md
• Tests de routage : Utilisation de RouterTestingHarness pour des tests de navigation fiables. Lisez router-testing.md
• Tests de bout en bout (E2E) : Configuration et exécution de tests E2E. Lisez e2e-testing.md

Outils

Lorsque vous travaillez avec les outils Angular, consultez les références suivantes :

• Angular CLI : Création d'applications, génération de code (composants, routes, services), serveur et build. Lisez cli.md
• Modernisation du code : Refactorisation automatique vers les normes modernes à l'aide de migrations. Lisez migrations.md
• Serveur MCP Angular : Outils disponibles, configuration et fonctionnalités expérimentales. Lisez mcp.md
• Configuration de l'environnement : Stratégies de configuration au moment du build et de l'exécution. Lisez environment-configuration.md