Avoiding Hallucinations When Building Angular Apps with Gemini CLI

#ai #angular #webdev #gemini

We are seeing new models released every five or six months. That does not mean they are trained with the latest information. For example, a model may not include the most recent Angular documentation and can easily generate outdated code that does not follow current best practices.

GeminiCLI is a great tool for building faster with AI, but it is not immune to hallucinations. Below are a few techniques you can use to get more accurate output and better-aligned Angular code.

Prompt with best practices

You can define a shared prompt in your Gemini.md file. This helps guide the model to generate code that follows modern Angular patterns and current best practices.

Another option is to define a custom slash command and trigger it with every request. That way, you make sure your instructions are always included.

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 the type is uncertain

## Angular Best Practices
- Always use standalone components over NgModules
- Must NOT set `standalone: true` inside Angular decorators. It is the default in Angular v20+
- Use signals for state management
- Implement lazy loading for feature routes
- Do NOT use `@HostBinding` or `@HostListener`. Use the `host` object in the `@Component` or `@Directive` decorator instead
- Use `NgOptimizedImage` for all static images
  - `NgOptimizedImage` does not work with inline base64 images

## Accessibility Requirements
- Must pass all AXE checks
- Must follow WCAG AA minimums, including focus management, color contrast, and proper 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 the `@Component` decorator
- Prefer inline templates for small components
- Prefer reactive forms over template-driven forms
- Do NOT use `ngClass`; use `class` bindings instead
- Do NOT use `ngStyle`; use `style` bindings instead
- When using external templates or styles, use paths relative to the component TypeScript 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

## Services
- Design services around a single responsibility
- Use `providedIn: 'root'` for singleton services
- Use the `inject()` function instead of constructor injection

This approach gives you full control over the rules you want the model to follow. The downside is that this file becomes another artifact you need to keep up to date as Angular evolves.

llms.txt

Another approach is exposing a llms.txt file. The idea is for websites to provide a single entry point that language models can use to discover official and structured documentation. Conceptually, it is similar to a RAG setup, but without the infrastructure overhead.

Angular currently exposes two versions:
• llms.txt A lightweight file that links to key resources
• llms-full.txt A comprehensive set of resources that explains how Angular works and how to build Angular applications

This solves part of the maintenance problem because you no longer need to keep your own prompt updated. The tradeoff is that you now depend on an external source being available and accurate.

Angular MCP

The Angular CLI now includes an MCP that GeminiCLI can consume to access up-to-date documentation and best practices. This is the most robust option and requires very little setup.

In .gemini/settings.json, add the following:

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

This gives GeminiCLI access to several Angular-specific tools:
• ai_tutor
Launches an interactive Angular tutor. Recommended for new Angular v20+ projects
• find_examples
Finds authoritative and up-to-date code examples based on official Angular sources
• get_best_practices
Retrieves the Angular Best Practices Guide, covering standalone components, typed forms, and modern control flow
• list_projects
Lists all applications and libraries defined in an Angular workspace by reading angular.json
• onpush_zoneless_migration
Analyzes your codebase and provides a step-by-step plan to migrate to OnPush change detection, a requirement for zoneless applications
• search_documentation
Searches the official Angular documentation at angular.dev for APIs, guides, and best practices