Générer du code avec des grands modèles de langage (LLM) suscite un intérêt croissant chez les développeurs. Si les LLM sont souvent capables de générer du code fonctionnel, il peut être difficile de générer du code pour des frameworks en évolution constante comme Angular.
Les instructions avancées et le prompting deviennent un standard pour accompagner la génération de code moderne avec des détails propres au domaine. Cette section contient du contenu et des ressources sélectionnés pour favoriser une génération de code plus précise pour Angular avec les LLM.
Prompts personnalisés et instructions système
Améliorez votre expérience de génération de code avec les LLM en utilisant l'un des fichiers personnalisés suivants, propres au domaine.
Note : Ces fichiers seront mis à jour régulièrement pour rester alignés sur les conventions d'Angular.
Voici un ensemble d'instructions pour aider les LLM à générer du code correct qui suit les bonnes pratiques Angular. Ce fichier peut être ajouté comme instructions système à votre outillage IA ou inclus avec votre prompt comme contexte.
You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
## TypeScript Best Practices
- Use strict type checking
- Prefer type inference when the type is obvious
- Avoid the `any` type; use `unknown` when type is uncertain
## Angular Best Practices
- Always use standalone components over NgModules
- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
- Do NOT set `changeDetection: ChangeDetectionStrategy.OnPush` explicitly. `OnPush` is the default in Angular v22+.
- Use signals for state management
- Implement lazy loading for feature routes
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
- Use `NgOptimizedImage` for all static images.
- `NgOptimizedImage` does not work for inline base64 images.
## Accessibility Requirements
- It MUST pass all AXE checks.
- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
## Components
- Keep components small and focused on a single responsibility
- Use `input()` and `output()` functions instead of decorators
- Use `model()` for two-way bound properties with `[(prop)]` syntax instead of pairing `input()` with `output()`
- Use `computed()` for derived state
- Use `linkedSignal()` for state derived from multiple reactive sources that must stay synchronized
- Prefer inline templates for small components
- Prefer Signal Forms (`@angular/forms/signals`) for new forms. They are stable in Angular v22+ and provide signal-based state, type-safe field access, and schema-based validation
- When not using Signal Forms, prefer Reactive forms instead of Template-driven ones
- Do NOT use `ngClass`, use `class` bindings instead
- Do NOT use `ngStyle`, use `style` bindings instead
- Do NOT import `CommonModule`, import only the directives and pipes the template uses, such as `AsyncPipe` or `DatePipe`
- When using external templates/styles, use paths relative to the component TS file.
## State Management
- Use signals for local component state
- Use `computed()` for derived state
- Keep state transformations pure and predictable
- Do NOT use `mutate` on signals, use `update` or `set` instead
## Templates
- Keep templates simple and avoid complex logic
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
- Use the async pipe to handle observables
- Do not assume globals like (`new Date()`) are available.
## Services
- Design services around a single responsibility
- Use the `providedIn: 'root'` option for singleton services
- Prefer the `@Service` decorator over `@Injectable({providedIn: 'root'})` for new singleton services (Angular v22+)
- Use the `inject()` function instead of constructor injectionCliquez ici pour télécharger le fichier best-practices.md.
Fichiers de règles
Plusieurs outils, comme Antigravity, disposent de fichiers de règles utiles pour fournir un contexte essentiel aux LLM.
| Environnement/IDE | Fichier de règles | Instructions d'installation |
|---|---|---|
| Antigravity | GEMINI.md | Configurer GEMINI.md |
| IDE basés sur Copilot | copilot-instructions.md | Configurer .github/copilot-instructions.md |
| Cursor | cursor.md | Configurer cursorrules.md |
| IDE JetBrains | AGENTS.md | Configurer AGENTS.md |
| VS Code | .instructions.md | Configurer .instructions.md |
| Windsurf | guidelines.md | Configurer guidelines.md |
Configurer le serveur MCP de l'Angular CLI
L'Angular CLI inclut un serveur Model Context Protocol (MCP) expérimental qui permet aux assistants IA de votre environnement de développement d'interagir avec l'Angular CLI.
Découvrez comment configurer le serveur MCP de l'Angular CLI
Fournir du contexte avec llms.txt
llms.txt est un standard proposé pour les sites web, conçu pour aider les LLM à mieux comprendre et traiter leur contenu. L'équipe Angular a développé deux versions de ce fichier pour aider les LLM, et les outils qui utilisent des LLM pour la génération de code, à produire un meilleur code Angular moderne.
- llms.txt - un fichier d'index qui fournit des liens vers les fichiers et ressources clés.
- llms-full.txt - un ensemble de ressources compilé plus complet, qui décrit le fonctionnement d'Angular et la façon de construire des applications Angular.
Consultez aussi la page de présentation pour en savoir plus sur l'intégration de l'IA dans vos applications Angular.