Claude Code pour Angular : CLI, composants standalone, formulaires, HTTP et tests

Claude Code devient vraiment utile dans un projet Angular lorsqu’il agit comme un assistant qui comprend le dépôt, pas comme un simple générateur de composants. Une modification réaliste touche souvent Angular CLI, un composant standalone, Reactive Forms, un service typé, HttpClient, les tests unitaires, l’E2E et une revue finale.

Un standalone component est un composant qui déclare lui-même ses dépendances dans imports, sans passer par un NgModule. Reactive Forms signifie que le modèle du formulaire et ses règles de validation sont explicites dans TypeScript. HttpClient est l’API Angular officielle pour communiquer avec le backend. Ces mots doivent apparaître dans le prompt, sinon Claude Code peut revenir à des patterns moins adaptés au projet.

Gardez les références officielles ouvertes : Angular CLI, Reactive forms, HttpClient, Angular testing et Claude Code workflows. Pour compléter, lisez aussi les techniques TypeScript, la stratégie de test et les bonnes pratiques CLAUDE.md.

Définir un cadre sûr

Avant de demander du code, demandez une lecture du projet. Claude Code a besoin d’un harness, c’est-à-dire un cadre de travail sûr : fichiers autorisés, conventions, commandes de vérification et erreurs à éviter.

Lis ce projet Angular avant toute modification. Vérifie package.json, angular.json et src/app.
Dis-moi si le projet utilise des standalone components, quel runner de tests est configuré,
où HttpClient est fourni et quelles conventions de nommage sont visibles.
N'édite aucun fichier pour l'instant.

Zone	À confier à Claude Code	Décision humaine
Angular CLI	commandes, emplacements, dépendances	routes et conventions
Component	imports, template, signals, événements	texte UI, accessibilité
Reactive Forms	FormGroup, validators, état submit	règles métier
Service / HTTP	types, méthodes API, backend de test	contrat API, auth, erreurs
Tests	unit, E2E, régressions	niveau de couverture

flowchart LR
  P[Prompt] --> C[Angular CLI]
  C --> A[Standalone component]
  A --> F[Reactive Forms]
  A --> S[Ticket service]
  S --> H[HttpClient]
  F --> U[Unit tests]
  A --> E[E2E tests]
  U --> R[Review]
  E --> R

Créer une base vérifiable avec Angular CLI

Pour un nouveau test, Angular CLI donne une base propre. Dans un dépôt existant, demandez d’abord à Claude Code de lire la configuration.

npm install -g @angular/cli
ng new support-desk-angular --standalone --routing --style css
cd support-desk-angular
ng generate component features/tickets/ticket-intake --standalone
ng generate service data/ticket
ng test

Lancer ng test avant modification est important. Si les tests échouent déjà, Claude Code risque de traiter des problèmes anciens comme des régressions. En travail parallèle, indiquez aussi de ne modifier que le périmètre concerné et de ne jamais annuler les changements non commités d’autres personnes.

Commencer par le service typé

Je préfère définir le service avant le formulaire. Le contrat API devient visible, et le composant reste concentré sur l’état de l’interface.

import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs';

export type TicketPriority = 'low' | 'medium' | 'high';

export interface TicketDraft {
  title: string;
  email: string;
  priority: TicketPriority;
  message: string;
}

export interface Ticket extends TicketDraft {
  id: string;
  createdAt: string;
}

@Injectable({ providedIn: 'root' })
export class TicketService {
  private readonly http = inject(HttpClient);
  private readonly baseUrl = '/api/tickets';

  listTickets(): Observable<Ticket[]> {
    return this.http.get<Ticket[]>(this.baseUrl);
  }

  createTicket(draft: TicketDraft): Observable<Ticket> {
    return this.http.post<Ticket>(this.baseUrl, draft);
  }
}

Dans une application standalone, configurez HttpClient dans app.config.ts.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient()],
};

Le piège classique est un service qui contient aussi le texte d’erreur, la logique de retry et l’état local de l’écran. Gardez le service simple : endpoint, types et communication.

Écrire le formulaire standalone

Le composant suivant utilise Reactive Forms et un signal pour l’état de sauvegarde. Le prompt doit préciser de ne pas utiliser ngModel.

import { Component, computed, inject, signal } from '@angular/core';
import { ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
import { finalize } from 'rxjs';
import { Ticket, TicketService, TicketPriority } from '../../../data/ticket.service';

@Component({
  selector: 'app-ticket-intake',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()" aria-label="Support ticket form">
      <label>Title <input type="text" formControlName="title" /></label>
      <label>Email <input type="email" formControlName="email" /></label>
      <label>
        Priority
        <select formControlName="priority">
          <option value="low">Low</option>
          <option value="medium">Medium</option>
          <option value="high">High</option>
        </select>
      </label>
      <label>Message <textarea formControlName="message"></textarea></label>

      @if (form.hasError('submit')) {
        <p role="alert">Ticket could not be saved. Please try again.</p>
      }
      @if (savedTicket(); as ticket) {
        <p role="status">Saved ticket {{ ticket.id }}</p>
      }
      <button type="submit" [disabled]="isSubmitDisabled()">
        {{ saving() ? 'Saving...' : 'Create ticket' }}
      </button>
    </form>
  `,
})
export class TicketIntakeComponent {
  private readonly ticketService = inject(TicketService);
  readonly saving = signal(false);
  readonly savedTicket = signal<Ticket | null>(null);

  readonly form = new FormGroup({
    title: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.minLength(5)] }),
    email: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] }),
    priority: new FormControl<TicketPriority>('medium', { nonNullable: true }),
    message: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.minLength(20)] }),
  });

  readonly isSubmitDisabled = computed(() => this.form.invalid || this.saving());

  submit(): void {
    this.form.markAllAsTouched();
    this.form.setErrors(null);
    if (this.form.invalid) return;

    this.saving.set(true);
    this.ticketService.createTicket(this.form.getRawValue()).pipe(
      finalize(() => this.saving.set(false)),
    ).subscribe({
      next: (ticket) => {
        this.savedTicket.set(ticket);
        this.form.reset({ title: '', email: '', priority: 'medium', message: '' });
      },
      error: () => this.form.setErrors({ submit: true }),
    });
  }
}

Les erreurs concrètes à surveiller sont le mélange ngModel / formControlName, l’absence de désactivation pendant l’envoi, et l’utilisation directe de form.value avec des valeurs possiblement nulles.

Cas d’usage

Premier cas : formulaire d’administration. Le prompt doit lister champs, validations, état de sauvegarde, succès et erreur.

Deuxième cas : extraire des appels HTTP d’un ancien composant. Demandez les types, le service, la séparation du texte UI et un test HttpClient.

Troisième cas : corriger un bug avec test de régression. Si un échec API laisse le bouton désactivé, fournissez la reproduction, le résultat attendu et la commande de test.

Quatrième cas : migration progressive vers standalone. Limitez Claude Code à un dossier feature, gardez routing et providers stables, et relancez les tests.

Tests et revue

Les tests HttpClient ne doivent pas joindre le réseau réel.

import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
import { TicketService } from './ticket.service';

describe('TicketService', () => {
  let service: TicketService;
  let http: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [TicketService, provideHttpClient(), provideHttpClientTesting()],
    });
    service = TestBed.inject(TicketService);
    http = TestBed.inject(HttpTestingController);
  });

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

  it('creates a ticket through the API', () => {
    const draft = {
      title: 'Billing export is stuck',
      email: 'ops@example.com',
      priority: 'high' as const,
      message: 'The monthly billing export has not finished for two hours.',
    };

    service.createTicket(draft).subscribe((ticket) => expect(ticket.id).toBe('T-100'));
    const req = http.expectOne('/api/tickets');
    expect(req.request.method).toBe('POST');
    expect(req.request.body).toEqual(draft);
    req.flush({ ...draft, id: 'T-100', createdAt: '2026-06-02T09:00:00.000Z' });
  });
});

Pour l’E2E, utilisez ng e2e si le workspace a une cible configurée, ou Playwright si c’est le standard de l’équipe. Vérifiez au minimum l’affichage, la saisie, l’envoi et le message de succès.

Revois ce diff Angular de façon critique.
Vérifie imports/providers standalone, valeurs nullable dans Reactive Forms,
double submit, frontière service/UI, tests HttpClient,
couverture unit/E2E, any, subscriptions inutiles et accessibilité.
Retourne les problèmes avec fichier, ligne et priorité.

Résultat et CTA

Lors d’un essai sur un petit projet Angular, un prompt vague a produit un formulaire avec ngModel, un service trop chargé et aucun test d’échec. En découpant la tâche en lecture du projet, service, formulaire, test HTTP, E2E et revue, le diff était beaucoup plus simple à valider. Pour industrialiser cette pratique, documentez les règles dans CLAUDE.md et utilisez la formation et consultation Claude Code pour construire un flux de revue reproductible.