|
| 1 | +# Copilot Instructions for Angular Projects |
| 2 | + |
| 3 | +1. **Use the Latest Angular and TypeScript** |
| 4 | + - Always use the latest stable version of Angular (currently v20) and TypeScript. |
| 5 | + - Code examples must reference Angular 20+ APIs and features. |
| 6 | + - If unsure about a feature or API, refer to the [Angular Docs](https://angular.dev/). |
| 7 | + |
| 8 | +2. **Modern Angular Features Only** |
| 9 | + - Always prefer Angular control flow syntax over legacy structural directives. |
| 10 | + - Use Angular signals for state management and reactivity. |
| 11 | + - Prefer input signals and output signals for component communication. See: [inputs](https://angular.dev/reference/api/core/InputSignal), [outputs](https://angular.dev/reference/api/core/OutputSignal). |
| 12 | + |
| 13 | +3. **No Legacy Decorators** |
| 14 | + - Do not use or recommend `@Input` and `@Output` decorators in new examples. |
| 15 | + - Use signals and Angular's latest patterns for data flow and events. |
| 16 | + |
| 17 | +4. **Template Syntax & Style** |
| 18 | + - Use the latest template syntax and best practices, such as `@for`, `@if`, `@switch` (Angular's new control flow). |
| 19 | + - Always use `<ng-container>` for structural grouping when needed. |
| 20 | + |
| 21 | +5. **Component Architecture** |
| 22 | + - Prefer standalone components wherever possible (avoid NgModules for new features unless there’s a clear need). |
| 23 | + - Encourage use of feature encapsulation with self-contained, reusable components. |
| 24 | + |
| 25 | +6. **Type Safety & Strictness** |
| 26 | + - Enable `"strict": true` in `tsconfig.json` for all projects. |
| 27 | + - Always provide explicit types for function signatures, variables, and observables. |
| 28 | + |
| 29 | +7. **Dependency Injection** |
| 30 | + - Use `@Injectable({providedIn: 'root'})` for services unless there's a reason for a different scope. |
| 31 | + - Always prefer Angular DI patterns over manual instantiation or singleton hacks. |
| 32 | + |
| 33 | +8. **API Communication** |
| 34 | + - Use Angular’s `HttpClient` for all HTTP/API interactions. |
| 35 | + - Prefer typed HTTP responses and error handling using RxJS. |
| 36 | + |
| 37 | +9. **State Management** |
| 38 | + - For component-level state, use signals. |
| 39 | + - For app-wide state, recommend using signals-based libraries or lightweight solutions compatible with Angular 20+ (e.g., SignalStore, Akita signals, etc.), but avoid heavy, legacy state libraries like NgRx unless necessary. |
| 40 | + |
| 41 | +10. **Testing** |
| 42 | + - All code examples should include unit test snippets where applicable. |
| 43 | + - Use Angular’s karma, jasmine testing APIs. |
| 44 | + |
| 45 | +11. **Accessibility** |
| 46 | + - Ensure all code examples follow WCAG guidelines and Angular’s accessibility best practices. |
| 47 | + |
| 48 | +12. **Documentation and Comments** |
| 49 | + - Comment public APIs, inputs, and outputs in all examples. |
| 50 | + - Reference Angular style guide for structure and naming conventions. |
| 51 | + |
| 52 | +13. **No Deprecated APIs** |
| 53 | + - Never recommend deprecated Angular APIs, patterns, or features. |
| 54 | + - Double-check breaking changes or removals for each new Angular version [here](https://update.angular.io/). |
0 commit comments