Prompts de LLM e configuração de IDE com IA

Gerar código com modelos de linguagem grandes (LLMs) é uma área de interesse em rápido crescimento para desenvolvedores. Embora os LLMs frequentemente sejam capazes de gerar código funcional, pode ser um desafio gerar código para frameworks em constante evolução como Angular.

Instruções avançadas e prompting são um padrão emergente para suportar geração de código moderna com detalhes específicos de domínio. Esta seção contém conteúdo e recursos selecionados para suportar geração de código mais precisa para Angular e LLMs.

Prompts Customizados e Instruções de Sistema

Melhore sua experiência gerando código com LLMs usando um dos seguintes arquivos customizados e específicos de domínio.

Aqui está um conjunto de instruções para ajudar LLMs a gerar código correto que segue as boas práticas do Angular. Este arquivo pode ser incluído como instruções de sistema para suas ferramentas de IA ou incluído junto com seu prompt como contexto.

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+.- 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 `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- 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.- Do not write arrow functions in templates (they are not supported).- Do not write Regular expressions in templates (they are not supported).## Services- Design services around a single responsibility- Use the `providedIn: 'root'` option for singleton services- Use the `inject()` function instead of constructor injection

Clique aqui para baixar o arquivo best-practices.md.

Arquivos de Regras

Vários editores, como Firebase Studio possuem arquivos de regras úteis para fornecer contexto crítico aos LLMs.

Configuração do Angular CLI MCP Server

O Angular CLI inclui um Model Context Protocol (MCP) server experimental que permite que assistentes de IA em seu ambiente de desenvolvimento interajam com o Angular CLI.

Aprenda a configurar o Angular CLI MCP Server

Fornecendo Contexto com llms.txt

llms.txt é um padrão proposto para sites projetado para ajudar LLMs a entender e processar melhor seu conteúdo. A equipe Angular desenvolveu duas versões deste arquivo para ajudar LLMs e ferramentas que usam LLMs para geração de código a criar código Angular moderno melhor.

• llms.txt - um arquivo de índice fornecendo links para arquivos e recursos-chave.
• llms-full.txt - um conjunto compilado mais robusto de recursos descrevendo como Angular funciona e como construir aplicações Angular.

Certifique-se de conferir a página de visão geral para mais informações sobre como integrar IA em suas aplicações Angular.

Web Codegen Scorer

A equipe Angular desenvolveu e disponibilizou como open-source o Web Codegen Scorer, uma ferramenta para avaliar e pontuar a qualidade do código web gerado por IA. Você pode usar esta ferramenta para tomar decisões baseadas em evidências relacionadas a código gerado por IA, como ajustar prompts para melhorar a precisão do código gerado por LLM para Angular. Esses prompts podem ser incluídos como instruções de sistema para suas ferramentas de IA ou como contexto com seu prompt. Você também pode usar esta ferramenta para comparar a qualidade do código produzido por diferentes modelos e monitorar a qualidade ao longo do tempo à medida que modelos e agentes evoluem.