Генерация кода с помощью больших языковых моделей (LLM) быстро набирает популярность среди разработчиков. Хотя LLM часто способны генерировать рабочий код, стабильно получать качественный код для постоянно развивающихся фреймворков вроде Angular бывает непросто.
Продвинутые инструкции и промптинг становятся стандартом поддержки современной генерации кода с учётом предметной области. В этом разделе собраны материалы и ресурсы, которые помогают LLM точнее генерировать код для Angular.
Пользовательские промпты и системные инструкции
Улучшите генерацию кода с LLM, используя один из следующих специализированных файлов.
ПРИМЕЧАНИЕ: Эти файлы регулярно обновляются, чтобы соответствовать соглашениям Angular.
Ниже — набор инструкций, помогающих LLM генерировать корректный код по лучшим практикам Angular. Файл можно подключить как системные инструкции к ИИ-инструменту или добавить к промпту как контекст.
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
- 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 injection
Нажмите здесь, чтобы скачать файл best-practices.md.
Файлы правил
В ряде редакторов, например в Firebase Studio, есть файлы правил, полезные для передачи критически важного контекста LLM.
| Среда/IDE | Файл правил | Инструкции по установке |
|---|---|---|
| Firebase Studio | airules.md | Настройка airules.md |
| IDE на базе Copilot | copilot-instructions.md | Настройка .github/copilot-instructions.md |
| Cursor | cursor.md | Настройка cursorrules.md |
| JetBrains IDEs | guidelines.md | Настройка guidelines.md |
| VS Code | .instructions.md | Настройка .instructions.md |
| Windsurf | guidelines.md | Настройка guidelines.md |
Настройка Angular CLI MCP Server
Angular CLI включает экспериментальный Model Context Protocol (MCP) server, который позволяет ИИ-ассистентам в среде разработки взаимодействовать с Angular CLI.
Узнайте, как настроить Angular CLI MCP Server
Контекст с помощью llms.txt
llms.txt — предлагаемый стандарт для сайтов, помогающий LLM лучше понимать и обрабатывать их содержимое. Команда Angular подготовила две версии этого файла, чтобы LLM и инструменты на их основе генерировали более качественный современный код Angular.
- llms.txt — индексный файл со ссылками на ключевые файлы и ресурсы.
- llms-full.txt — более полный набор материалов о том, как устроен Angular и как создавать Angular-приложения.
Обязательно загляните на обзорную страницу, чтобы узнать больше об интеграции ИИ в Angular-приложения.
Web Codegen Scorer
Команда Angular разработала и открыла исходный код Web Codegen Scorer — инструмента для оценки качества веб-кода, сгенерированного ИИ. С его помощью можно принимать решения на основе данных: например, дорабатывать промпты, чтобы повысить точность кода Angular от LLM. Такие промпты можно подключать как системные инструкции к ИИ-инструменту или как контекст к запросу. Также инструмент позволяет сравнивать качество кода разных моделей и отслеживать его со временем по мере развития моделей и агентов.