développeur-angular

Directives pour le Développeur Angular

Quand l'activer

• Travailler dans un projet ou une base de code Angular
• Créer ou générer un nouveau projet, une application ou une bibliothèque Angular
• Générer des composants, services, directives, pipes, guards ou resolvers
• Implémenter la réactivité avec les Angular Signals, linkedSignal ou resource
• Travailler avec des formulaires Angular (formulaires de signaux, formulaires réactifs ou pilotés par les templates)
• Mettre en place l'injection de dépendances, le routage, le chargement paresseux ou les guards de route
• Ajouter de l'accessibilité (ARIA), des animations ou des styles de composants
• Écrire ou déboguer des tests spécifiques à Angular (unitaires, harness de composants, E2E)
• Configurer les outils Angular CLI ou le serveur Angular MCP

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

2. Lors de la génération de code, suivez le guide de style et les bonnes pratiques d'Angular 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 la génération de code terminée, 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 poursuivre. Ne sautez pas cette étape, car elle est essentielle pour garantir l'exactitude et la fonctionnalité du code généré.

Création de nouveaux projets

Si l'utilisateur ne fournit pas de directives, utilisez ces valeurs par défaut lors de la création d'un nouveau projet Angular :

1. Utilisez la dernière version stable d'Angular, sauf indication contraire de l'utilisateur.
2. Préférez les formulaires de signaux pour les nouveaux projets uniquement lorsque la version cible d'Angular les prend en charge. En savoir plus.

Règles d'exécution pour ng new : Lorsque l'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 de 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 retourne une version installée, utilisez directement l'installation locale/globale.
• Commande : ng new <nom-du-projet>

Étape 3 : Repli vers la dernière version.

• 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 dernière version.
• 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 contrôle de flux des 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 hôtes 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 Angular Signals et consultez les références suivantes :

• Aperçu des Signals : 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 des signaux. Lisez resource.md
• Effets de bord (effect) : Journalisation, manipulation DOM tierce (afterRenderEffect) et quand NE PAS utiliser les effets. Lisez effects.md

Formulaires

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

• Si la version de l'application prend en charge les formulaires de signaux et qu'il s'agit d'un nouveau formulaire, préférez les formulaires de signaux.

• Pour les applications plus anciennes ou les formulaires existants, utilisez la stratégie de formulaire actuelle de l'application.

• Formulaires de signaux : Utilisez des signaux pour la gestion de l'état des formulaires. 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 : Aperçu 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 : Fourniture 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

Angular Aria

Lors de la création de composants personnalisés accessibles pour l'un des modèles suivants : Accordéon, Listbox, Combobox, Menu, Onglets, Barre d'outils, Arbre, 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, Arbre, 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 URL, segments statiques vs dynamiques, wildcards et redirections. Lisez define-routes.md
• Stratégies de chargement des routes : Chargement immédiat vs paresseux, 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
• Resolveurs de données : Préchargement des données avant l'activation de la route avec ResolveFn. Lisez data-resolvers.md
• Cycle de vie et événements du routeur : Ordre chronologique des événements de navigation et débogage. Lisez router-lifecycle.md
• Stratégies de rendu : CSR, SSG (prérendu) 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 du 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 l'écriture 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, modèles asynchrones et TestBed. Lisez testing-fundamentals.md
• Harnesses de composants : Modèles 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) : Bonnes pratiques pour les tests E2E avec Cypress ou Playwright. 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 de développement et build. Lisez cli.md
• Serveur Angular MCP : Outils disponibles, configuration et fonctionnalités expérimentales. Lisez mcp.md

Anti-patrons

• Utiliser null ou undefined comme valeurs initiales des champs de formulaire de signaux — utilisez plutôt '', 0 ou []
• Accéder aux indicateurs d'état des champs de formulaire sans appeler le champ d'abord : form.field.valid() — utilisez form.field().valid()
• Démarrer de nouveaux formulaires avec des API de formulaire plus anciennes alors que la version cible d'Angular prend en charge les formulaires de signaux
• Définir les attributs HTML min, max, value, disabled ou readonly sur les entrées [formField] — définissez-les plutôt comme des règles de schéma
• Appeler inject() en dehors d'un contexte d'injection — utilisez runInInjectionContext si nécessaire
• Utiliser effect() pour un état dérivé qui devrait utiliser computed()
• Référencer $parent.$index dans les boucles @for imbriquées — Angular ne prend pas en charge $parent ; utilisez plutôt let outerIdx = $index

Compétences connexes

• tdd-workflow — flux de développement piloté par les tests applicable aux composants et services Angular
• security-review — liste de contrôle de sécurité pour les applications web, y compris les aspects spécifiques à Angular
• frontend-patterns — modèles frontend généraux pour le contexte des approches React/Next.js