Generating code with large language models (LLMs) is a rapidly growing area of interest for developers. While LLMs are often capable of generating working code it can be a challenge to generate code for consistently evolving frameworks like Angular.
Advanced instructions and prompting are an emerging standard for supporting modern code generation with domain specific details. This section contains curated content and resources to support more accurate code generation for Angular and LLMs.
Custom Prompts and System Instructions
Improve your experience generating code with LLMs by using one of the following custom, domain specific files.
NOTE: These files will be updated on a regular basis staying up to date with Angular's conventions.
Here is a set of instructions to help LLMs generate correct code that follows Angular best practices. This file can be included as system instructions to your AI tooling or included along with your prompt as context.
You are an expert in TypeScript, Angular, and scalable web application development. You write 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- Don't use explicit `standalone: true` (it is implied by default)- Use signals for state management- Implement lazy loading for feature routes- Use `NgOptimizedImage` for all static images.## Components- Keep components small and focused on a single responsibility- Use `input()` and `output()` functions instead of decorators- Use `computed()` for derived state- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator- Prefer inline templates for small components- Prefer Reactive forms instead of Template-driven ones- Do NOT use `ngClass`, use `class` bindings instead- DO NOT use `ngStyle`, use `style` bindings instead## State Management- Use signals for local component state- Use `computed()` for derived state- Keep state transformations pure and predictable## 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## Services- Design services around a single responsibility- Use the `providedIn: 'root'` option for singleton services- Use the `inject()` function instead of constructor injectionClick here to download the best-practices.md file.
Rules Files
Several editors, such as Firebase Studio have rules files useful for providing critical context to LLMs.
| Environment/IDE | Rules File | Installation Instructions |
|---|---|---|
| Firebase Studio | airules.md | Configure airules.md |
| Cursor | cursor.md | Configure cursorrules.md |
| JetBrains IDEs | guidelines.md | Configure guidelines.md |
Providing Context with llms.txt
llms.txt is a proposed standard for websites designed to help LLMs better understand and process their content. The Angular team has developed two versions of this file to help LLMs and tools that use LLMs for code generation to create better modern Angular code.
- llms.txt - an index file providing links to key files and resources.
- llms-full.txt - a more robust compiled set of resources describing how Angular works and how to build Angular applications.
Be sure to check out the overview page for more information on how to integrate AI into your Angular applications.