développeur-angular

Directives du développeur Angular

Quand activer

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

1. Analysez toujours la version Angular du projet avant de fournir des conseils, car les meilleures 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 Angular et les meilleures pratiques pour la maintenabilité et les performances. Utilisez Angular CLI pour échafauder les 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. En cas d'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 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 si l'utilisateur spécifie le contraire.
2. Privilégiez les Signal Forms 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: 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 utilisateur explicite.

• SI l'utilisateur demande une version spécifique (par exemple, Angular 15), contournez 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 directement l'installation locale/globale.
• 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 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 flux de contrôle 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 meilleures 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 non trouvée 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 inscriptible 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 tierce (afterRenderEffect), et quand NE PAS utiliser les effets. Lisez effects.md

Formulaires

Dans la plupart des cas pour les nouvelles applications, privilégiez les formulaires signal. Lorsque vous prenez une décision sur les formulaires, analysez le projet et considérez les directives suivantes :

• Si la version de l'application prend en charge les Signal Forms et qu'il s'agit d'un nouveau formulaire, privilégiez les formulaires signal.

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

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

• Formulaires pilotés par template : 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 les composants ou 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 construction 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 : Construction 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 d'URL, segments statiques vs dynamiques, wildcards, et redirections. Lisez define-routes.md
• Stratégies de chargement des routes : Chargement eager 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 des gardes : Implémentation de CanActivate, CanMatch, et autres gardes pour la sécurité. Lisez route-guards.md
• Résolveurs de données : Préchargement de 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, visitez 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 de CSS natif (recommandé) ou du DSL hérité pour les effets dynamiques. Lisez angular-animations.md
• Stylisation des composants : Meilleures 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 : Meilleures pratiques pour les tests unitaires, modèles asynchrones, et TestBed. Lisez testing-fundamentals.md
• Harnais de composants : Modèles standard pour une interaction robuste avec les composants. Lisez component-harnesses.md
• Test du routeur : Utilisation de RouterTestingHarness pour des tests de navigation fiables. Lisez router-testing.md
• Tests de bout en bout (E2E) : Meilleures 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), service, et construction. Lisez cli.md
• Serveur MCP Angular : Outils disponibles, configuration, et fonctionnalités expérimentales. Lisez mcp.md

Anti-patrons

• Utiliser null ou undefined comme valeurs initiales de champs de formulaire signal — utilisez '', 0, ou [] à la place
• 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 lorsque la version cible d'Angular prend en charge les Signal Forms
• 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 lorsque 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 let outerIdx = $index à la place

Compétences connexes

• tdd-workflow — flux de travail 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 préoccupations spécifiques à Angular
• frontend-patterns — modèles frontend généraux pour le contexte des approches React/Next.js