Angular + IA : développement assisté (AI-assisted)

Pourquoi l'IA change la donne pour Angular

Les LLMs (Large Language Models) modernes ne sont pas de simples autocomplétions. Ils comprennent les architectures Angular, les patterns TypeScript stricts, les bonnes pratiques d'injection de dépendances et même les subtilités de sécurité. En 2025, ignorer ces outils dans son workflow Angular, c'est travailler 3 à 5 fois plus lentement que la concurrence.

La question n'est plus "faut-il utiliser l'IA ?" mais "comment l'utiliser sans sacrifier la qualité de code ?" Car c'est là le vrai piège : l'IA génère vite, mais génère aussi des bugs, des patterns dépassés et des failles de sécurité si vous la laissez faire sans supervision.

Ce que l'IA maîtrise en Angular

• Services et injection de dépendances : génération CRUD complète en secondes
• Composants réactifs : Signals, computed(), effect() avec le bon pattern
• Formulaires réactifs : FormGroup, validateurs custom, gestion d'erreurs
• Tests unitaires : suites Jasmine/Vitest avec mocks corrects
• Refactoring : migration RxJS vers Signals ligne par ligne
• Documentation : JSDoc complet généré depuis le code existant

Ce que l'IA ne maîtrise pas (encore)

• La logique métier complexe spécifique à votre domaine
• Les contraintes d'architecture globale de votre projet
• La gestion des cas limites que vous seul connaissez
• La pertinence de tel pattern vs un autre dans votre contexte

C'est pourquoi le modèle gagnant est IA pour la structure, humain pour la logique. Apprenons à appliquer ça concrètement.

GitHub Copilot : l'assistant de code en temps réel

GitHub Copilot s'intègre directement dans VS Code, JetBrains et Neovim. Il lit le contexte de votre fichier ouvert, les imports, les noms de variables et prédit la suite du code. Pour Angular, il connaît les décorateurs, les lifecycle hooks et les patterns courants.

Exemple 1 : générer un service CRUD complet

Vous écrivez le nom de la classe et les imports, Copilot génère le reste :

// src/app/services/product.service.ts
import { Injectable, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

// Interface produit typée strictement
export interface Product {
  id: number;
  name: string;
  price: number;
  stock: number;
  category: string;
}

@Injectable({ providedIn: 'root' })
export class ProductService {
  private readonly apiUrl = '/api/products';

  // Signals pour l'état réactif
  private _products = signal([]);
  private _loading = signal(false);
  private _error = signal(null);

  // Exposition en lecture seule
  readonly products = this._products.asReadonly();
  readonly loading = this._loading.asReadonly();
  readonly error = this._error.asReadonly();

  constructor(private http: HttpClient) {
    // Chargement automatique au démarrage
    this.loadAll();
  }

  // Récupérer tous les produits
  loadAll(): void {
    this._loading.set(true);
    this._error.set(null);
    this.http.get(this.apiUrl).subscribe({
      next: (data) => this._products.set(data),
      error: (err) => this._error.set('Erreur chargement produits'),
      complete: () => this._loading.set(false)
    });
  }

  // Créer un produit
  create(product: Omit): Observable {
    return this.http.post(this.apiUrl, product).pipe(
      tap((created) => this._products.update(list => [...list, created]))
    );
  }

  // Mettre à jour un produit
  update(id: number, changes: Partial): Observable {
    return this.http.patch(`${this.apiUrl}/${id}`, changes).pipe(
      tap((updated) => this._products.update(list =>
        list.map(p => p.id === id ? updated : p)
      ))
    );
  }

  // Supprimer un produit
  delete(id: number): Observable {
    return this.http.delete(`${this.apiUrl}/${id}`).pipe(
      tap(() => this._products.update(list => list.filter(p => p.id !== id)))
    );
  }
}

Copilot a généré ce service complet (avec Signals, gestion d'état, CRUD) à partir des imports initiaux. Gain de temps estimé : 25 minutes.

Exemple 2 : générer un Guard Angular

// src/app/guards/auth.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { map, take } from 'rxjs/operators';

// Guard fonctionnel (Angular 15+, plus modern que la classe)
export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  return authService.isAuthenticated$.pipe(
    take(1), // Prendre une seule valeur pour éviter les fuites
    map(isAuth => {
      if (isAuth) {
        return true; // Accès autorisé
      }
      // Rediriger vers login avec l'URL d'origine
      return router.createUrlTree(['/login'], {
        queryParams: { returnUrl: state.url }
      });
    })
  );
};

Bonnes pratiques avec Copilot

• Validez chaque suggestion avant d'accepter (Tab = accepter, Escape = refuser)
• Vérifiez les types TypeScript générés — Copilot abuse parfois de any
• Relisez les imports ajoutés automatiquement
• Ne jamais accepter une suggestion sans lire le code généré
• Attention aux patterns dépréciés (Copilot connaît Angular 14, 15, 16...)

Claude API : génération de code Angular avancée

Claude API se distingue de Copilot par sa capacité à recevoir une spécification complète et générer plusieurs fichiers cohérents d'un coup. Idéal pour bootstrapper une feature entière, migrer du code ou générer des tests complets.

Prompt engineering pour Angular

La qualité du code généré dépend directement de votre prompt. Voici un template efficace :

// Template de prompt pour Claude - génération feature Angular

Tu es expert Angular 17+ avec TypeScript strict activé.
Génère une feature complète pour [DESCRIPTION].

Contraintes techniques :
- Angular 17+ avec standalone components
- Signals pour l'état (pas RxJS BehaviorSubject)
- TypeScript strict (pas de any, types explicites partout)
- Reactive Forms avec validateurs custom
- Gestion d'erreurs complète (try/catch + error signal)
- HttpClient avec types génériques

Structure à générer :
1. Interface TypeScript (model.ts)
2. Service avec Signals (service.ts)
3. Composant liste (list.component.ts + html)
4. Composant formulaire (form.component.ts + html)

N'utilise pas NgModule, seulement standalone.
Inclus des commentaires JSDoc sur les méthodes publiques.

Exemple : feature générée par Claude

Avec ce prompt pour une feature "Gestion de commandes", Claude génère :

// order.model.ts - Interface générée par Claude
export interface Order {
  id: number;
  customerId: number;
  items: OrderItem[];
  total: number;
  status: 'pending' | 'confirmed' | 'shipped' | 'delivered' | 'cancelled';
  createdAt: Date;
  updatedAt: Date;
}

export interface OrderItem {
  productId: number;
  productName: string;
  quantity: number;
  unitPrice: number;
  subtotal: number;
}

export type CreateOrderDto = Omit;

// order.service.ts - Service complet avec Signals
import { Injectable, signal, computed } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Order, CreateOrderDto } from './order.model';

@Injectable({ providedIn: 'root' })
export class OrderService {
  private readonly apiUrl = '/api/orders';

  // État réactif avec Signals
  private _orders = signal([]);
  private _selectedOrder = signal(null);
  private _loading = signal(false);
  private _error = signal(null);

  // Computed : stats calculées automatiquement
  readonly orders = this._orders.asReadonly();
  readonly selectedOrder = this._selectedOrder.asReadonly();
  readonly loading = this._loading.asReadonly();
  readonly error = this._error.asReadonly();

  /** Nombre total de commandes */
  readonly totalOrders = computed(() => this._orders().length);

  /** Montant total de toutes les commandes */
  readonly totalRevenue = computed(() =>
    this._orders().reduce((sum, o) => sum + o.total, 0)
  );

  /** Commandes en attente uniquement */
  readonly pendingOrders = computed(() =>
    this._orders().filter(o => o.status === 'pending')
  );

  constructor(private http: HttpClient) {}

  /** Charger toutes les commandes */
  loadOrders(): void {
    this._loading.set(true);
    this._error.set(null);

    this.http.get(this.apiUrl).subscribe({
      next: (orders) => this._orders.set(orders),
      error: () => this._error.set('Impossible de charger les commandes'),
      complete: () => this._loading.set(false)
    });
  }

  /** Créer une nouvelle commande */
  createOrder(dto: CreateOrderDto): Observable {
    return this.http.post(this.apiUrl, dto).pipe(
      tap(created => this._orders.update(list => [created, ...list]))
    );
  }

  /** Mettre à jour le statut d'une commande */
  updateStatus(id: number, status: Order['status']): Observable {
    return this.http.patch(`${this.apiUrl}/${id}/status`, { status }).pipe(
      tap(updated => this._orders.update(list =>
        list.map(o => o.id === id ? updated : o)
      ))
    );
  }
}

Claude génère ainsi une feature cohérente et typée en TypeScript strict. Ce qui aurait pris 2h se fait en 10 minutes de prompt + 15 minutes d'audit.

Patterns Angular et IA : Signals et standalone

Certains patterns Angular se prêtent particulièrement bien à la génération par IA. Voici les plus efficaces avec les prompts adaptés.

Pattern : composant standalone avec Signals

// Prompt: "Composant standalone Angular avec Signals pour afficher une liste filtrée"

import {
  Component,
  signal,
  computed,
  input,
  OnInit
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

interface ListItem {
  id: number;
  label: string;
  active: boolean;
}

@Component({
  selector: 'app-filtered-list',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="filtered-list">
      <!-- Champ de recherche lié au signal -->
      <input
        type="text"
        [(ngModel)]="searchTerm"
        placeholder="Rechercher..."
        class="form-control mb-3"
      />

      <!-- Compteur calculé automatiquement -->
      <p class="text-muted">{{ filteredItems().length }} résultat(s)</p>

      <!-- Liste filtrée avec @for (Angular 17+) -->
      @for (item of filteredItems(); track item.id) {
        <div class="list-item" [class.active]="item.active">
          {{ item.label }}
        </div>
      } @empty {
        <p class="text-muted">Aucun résultat pour "{{ searchTerm() }}"</p>
      }
    </div>
  `
})
export class FilteredListComponent implements OnInit {
  // Input signal (Angular 17.1+)
  items = input([]);

  // Signal local pour la recherche
  searchTerm = signal('');

  // Computed : filtre automatique quand searchTerm ou items change
  filteredItems = computed(() => {
    const term = this.searchTerm().toLowerCase();
    return this.items().filter(item =>
      item.label.toLowerCase().includes(term) && item.active
    );
  });

  ngOnInit(): void {}
}

Pattern : intercepteur HTTP avec gestion de tokens

// Prompt: "Intercepteur Angular qui ajoute le Bearer token et gère 401"
import {
  HttpInterceptorFn,
  HttpRequest,
  HttpHandlerFn,
  HttpErrorResponse
} from '@angular/common/http';
import { inject } from '@angular/core';
import { catchError, switchMap, throwError } from 'rxjs';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const auth = inject(AuthService);
  const router = inject(Router);

  // Ajouter le token si disponible
  const token = auth.getToken();
  const authReq = token
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req;

  return next(authReq).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 401) {
        // Token expiré : tenter le refresh
        return auth.refreshToken().pipe(
          switchMap(newToken => {
            const retryReq = req.clone({
              setHeaders: { Authorization: `Bearer ${newToken}` }
            });
            return next(retryReq);
          }),
          catchError(() => {
            // Refresh échoué : déconnexion et redirect
            auth.logout();
            router.navigate(['/login']);
            return throwError(() => error);
          })
        );
      }
      return throwError(() => error);
    })
  );
};

Refactoring guidé par l'IA : RxJS vers Signals

Le refactoring est l'un des cas d'usage les plus puissants de l'IA pour Angular. La migration de RxJS BehaviorSubject vers Signals est fastidieuse et répétitive — exactement ce pour quoi l'IA est faite.

Exemple de migration complète

Code avant (pattern RxJS classique) :

// AVANT - Pattern RxJS avec BehaviorSubject
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
import { map, distinctUntilChanged } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class CartService {
  // BehaviorSubject pour l'état
  private itemsSubject = new BehaviorSubject([]);
  private discountSubject = new BehaviorSubject(0);

  // Observables publics
  items$ = this.itemsSubject.asObservable();
  discount$ = this.discountSubject.asObservable();

  // Observable combiné pour le total
  total$ = combineLatest([this.items$, this.discount$]).pipe(
    map(([items, discount]) => {
      const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
      return subtotal * (1 - discount / 100);
    }),
    distinctUntilChanged()
  );

  addItem(item: CartItem): void {
    const current = this.itemsSubject.getValue();
    this.itemsSubject.next([...current, item]);
  }

  setDiscount(percent: number): void {
    this.discountSubject.next(percent);
  }
}

Prompt de migration : "Migre ce service de BehaviorSubject vers Angular Signals. Conserve la même API publique."

Code après (Signals) :

// APRÈS - Pattern Signals moderne
import { Injectable, signal, computed } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CartService {
  // Signals privés pour l'état
  private _items = signal([]);
  private _discount = signal(0);

  // Signaux publics en lecture seule (remplace les Observables)
  readonly items = this._items.asReadonly();
  readonly discount = this._discount.asReadonly();

  // Computed : recalcul automatique quand items ou discount change
  readonly total = computed(() => {
    const subtotal = this._items().reduce(
      (sum, item) => sum + item.price * item.quantity,
      0
    );
    return subtotal * (1 - this._discount() / 100);
  });

  // API publique identique à l'ancienne version
  addItem(item: CartItem): void {
    this._items.update(current => [...current, item]);
  }

  setDiscount(percent: number): void {
    this._discount.set(percent);
  }
}

Résultat : 30% de code en moins, plus lisible, et les Signals se recalculent automatiquement sans combineLatest ni distinctUntilChanged.

Générer des tests avec l'IA

L'IA excelle à générer des tests unitaires — tâche longue et répétitive que peu de développeurs apprécient. Le secret : fournir le code source et demander une couverture 100%.

Générer des tests pour un service Angular

// order.service.spec.ts - Généré par Claude
import { TestBed } from '@angular/core/testing';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { OrderService } from './order.service';
import { Order } from './order.model';

describe('OrderService', () => {
  let service: OrderService;
  let httpMock: HttpTestingController;

  const mockOrders: Order[] = [
    { id: 1, customerId: 10, items: [], total: 150, status: 'pending', createdAt: new Date(), updatedAt: new Date() },
    { id: 2, customerId: 11, items: [], total: 200, status: 'confirmed', createdAt: new Date(), updatedAt: new Date() }
  ];

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [OrderService]
    });
    service = TestBed.inject(OrderService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => httpMock.verify());

  // Test : état initial correct
  it('should have empty orders initially', () => {
    expect(service.orders()).toEqual([]);
  });

  // Test : chargement des commandes
  it('should load orders', () => {
    service.loadOrders();

    const req = httpMock.expectOne('/api/orders');
    expect(req.request.method).toBe('GET');
    req.flush(mockOrders);

    expect(service.orders()).toHaveLength(2);
    expect(service.loading()).toBe(false);
  });

  // Test : computed totalOrders
  it('should compute totalOrders correctly', () => {
    service.loadOrders();
    httpMock.expectOne('/api/orders').flush(mockOrders);

    expect(service.totalOrders()).toBe(2);
  });

  // Test : computed pendingOrders
  it('should filter pending orders via computed', () => {
    service.loadOrders();
    httpMock.expectOne('/api/orders').flush(mockOrders);

    expect(service.pendingOrders()).toHaveLength(1);
    expect(service.pendingOrders()[0].id).toBe(1);
  });

  // Test : création d'une commande
  it('should add order to list after create', () => {
    const newOrder: Order = { id: 3, customerId: 12, items: [], total: 99, status: 'pending', createdAt: new Date(), updatedAt: new Date() };

    service.createOrder({ customerId: 12, items: [], total: 99, status: 'pending' })
      .subscribe(o => expect(o.id).toBe(3));

    const req = httpMock.expectOne('/api/orders');
    req.flush(newOrder);

    // Vérifie que le signal a été mis à jour
    expect(service.orders()).toHaveLength(1);
    expect(service.orders()[0].id).toBe(3);
  });

  // Test : gestion d'erreur
  it('should set error signal on load failure', () => {
    service.loadOrders();
    httpMock.expectOne('/api/orders').error(new ErrorEvent('Network error'));

    expect(service.error()).toBe('Impossible de charger les commandes');
    expect(service.loading()).toBe(false);
  });
});

Ce fichier de tests couvre 100% du service : état initial, CRUD, computed signals, gestion d'erreurs. Généré en 2 minutes par Claude, aucun test à écrire à la main.

Les pièges à éviter absolument

L'IA génère vite, mais génère aussi des erreurs. Voici les patterns dangereux à toujours vérifier après génération.

Piège 1 : mémoire leak RxJS

// ❌ MAUVAIS - souscription non terminée = memory leak
@Component({ ... })
export class BadComponent implements OnInit {
  ngOnInit() {
    // Cette souscription vivra jusqu'à la mort de l'application !
    this.dataService.items$.subscribe(items => {
      this.items = items;
    });
  }
}

// ✅ BON - avec takeUntilDestroyed (Angular 16+)
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({ ... })
export class GoodComponent {
  private destroyRef = inject(DestroyRef);

  constructor(private dataService: DataService) {
    this.dataService.items$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(items => this.items = items);
  }
}

Piège 2 : types TypeScript absents

// ❌ Ce que l'IA génère parfois
loadData(): any {
  return this.http.get('/api/data').subscribe((data: any) => {
    this.items = data.items; // Erreur silencieuse si data.items n'existe pas
  });
}

// ✅ Ce qu'il faut exiger dans votre prompt
interface ApiResponse {
  items: Product[];
  total: number;
}

loadData(): void {
  this.http.get('/api/data').subscribe({
    next: ({ items }) => this.items.set(items),
    error: (err) => this.error.set('Erreur chargement')
  });
}

Piège 3 : XSS via innerHTML

// ❌ DANGER - XSS si userContent vient d'une source externe
<div [innerHTML]="userDescription"></div>

// ✅ Utiliser le texte interpolé (Angular échappe automatiquement)
<div>{{ userDescription }}</div>

// ✅ Ou sanitiser si HTML est nécessaire
import { DomSanitizer, SecurityContext } from '@angular/platform-browser';

getSafeHtml(html: string): string | null {
  return this.sanitizer.sanitize(SecurityContext.HTML, html);
}

Workflow IA-first en pratique

Voici le workflow que j'applique quotidiennement pour développer en Angular avec l'IA, sans perdre le contrôle de la qualité du code.

Le processus en 5 étapes

Comparatif des outils

Gains de productivité mesurés

Checklist IA-first pour Angular

Intégrer l'IA dans son workflow Angular demande de la méthode, pas juste un abonnement Copilot. Voici une checklist opérationnelle à utiliser avant chaque feature générée par IA.

Avant de générer

• La spec est rédigée : interface TypeScript attendue, comportements, patterns cibles (Signals ? standalone ?)
• Le prompt inclut : "Angular 17+", "TypeScript strict", "standalone components"
• Le prompt précise les patterns à éviter : "pas de NgModule", "pas de BehaviorSubject", "pas de any"

Après génération — audit obligatoire

• Rechercher any dans le code généré — chaque occurrence doit être typée explicitement
• Vérifier chaque .subscribe( — ajouter takeUntilDestroyed() ou pipe async
• Vérifier l'absence de [innerHTML] non sanitisé — remplacer par interpolation ou DomSanitizer
• Vérifier les imports ajoutés automatiquement — supprimer les imports inutilisés
• Valider les patterns Angular utilisés : sont-ils bien de la version cible ?

Génération des tests

• Fournir le code source complet au LLM avec le prompt : "Génère les tests unitaires avec couverture 100%"
• Vérifier que les mocks correspondent aux vraies signatures des services
• ng test passe à 100% avant tout commit

Outils recommandés par cas d'usage

• Complétion en temps réel (boilerplate, méthodes) → GitHub Copilot dans VS Code
• Feature complète multi-fichiers, refactoring → Claude API ou Cursor IDE
• Debug, explication d'erreur, migration → Claude / ChatGPT avec copie du stack trace
• Contexte projet complet (architecture globale) → Cursor IDE (accès à tous les fichiers)