Claude Code से Angular Development: CLI, Standalone, Forms, HTTP और Tests

Angular project में Claude Code का सही उपयोग सिर्फ “एक component बना दो” नहीं है। Real work में Angular CLI, standalone component, Reactive Forms, typed service, HttpClient, unit test, E2E और final review सब जुड़े होते हैं। अगर prompt में यह boundary साफ नहीं है, तो generated code दिखने में ठीक हो सकता है, लेकिन project convention से अलग हो जाएगा।

standalone component का मतलब है ऐसा component जो अपनी dependencies imports में खुद लिखता है और NgModule registration पर निर्भर नहीं रहता। Reactive Forms वह तरीका है जिसमें form values और validation rules TypeScript में साफ दिखाई देते हैं। HttpClient Angular की official API है जिससे backend से बात की जाती है।

काम करते समय official references साथ रखें: Angular CLI, Reactive forms, HttpClient, Angular testing, और Claude Code workflows। Related reading के लिए TypeScript Tips, Testing Strategy, और CLAUDE.md best practices देखें।

पहले boundary तय करें

Claude Code को harness चाहिए, यानी safe working frame। इसमें files, rules, commands और review points होते हैं।

इस Angular project को पहले पढ़ें। package.json, angular.json और src/app देखें।
बताएँ कि standalone components use हो रहे हैं या नहीं, test runner क्या है,
HttpClient कहाँ provide होता है और naming conventions क्या हैं।
अभी कोई file edit न करें।

Area	Claude Code का काम	Human decision
Angular CLI	generate command, file path, dependency check	route ownership, naming
Component	imports, template, signals, events	UI copy, accessibility
Reactive Forms	FormGroup, validators, submit state	business rules
Service / HTTP	types, API methods, test backend	API contract, auth
Tests	unit, E2E, regression	coverage target

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

Angular CLI से baseline बनाएँ

New experiment के लिए CLI clean start देता है। Existing repo में पहले 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

Edit से पहले ng test चलाना जरूरी है। अगर tests पहले से fail हैं, तो Claude Code old failure और new regression को mix कर सकता है। Team में parallel work हो तो prompt में लिखें कि सिर्फ assigned feature edit करे और दूसरों के uncommitted changes revert न करे।

पहले typed service लिखें

Form से पहले API service बनाना review को आसान करता है। यह src/app/data/ticket.service.ts में जा सकता है।

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);
  }
}

standalone app में HttpClient को app.config.ts में provide करें।

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()],
};

Common pitfall है service में UI message, retry logic और local screen state सब डाल देना। Service को endpoint, types और API call तक सीमित रखें।

Reactive Forms component बनाएँ

यह component Reactive Forms और signal save state use करता है। Prompt में साफ लिखें कि 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 }),
    });
  }
}

तीन failure cases बहुत common हैं: ngModel और formControlName को mix करना, save के दौरान button disable न करना, और nullable form.value को API में भेजना। nonNullable controls और getRawValue() safer हैं।

Use cases

Use case 1: admin entry form। Fields, validation, saving state, success और failure UI लिखें।

Use case 2: legacy component से HTTP calls निकालकर service बनाना। Types, service boundary और HttpClient test मांगें।

Use case 3: bug fix with regression। अगर API failure के बाद button disabled रह जाता है, reproduction steps और test command दें।

Use case 4: NgModule से standalone migration। एक feature folder तक limit रखें और routing/provider stable रखें।

Tests और review

HttpClient test real network पर नहीं जाना चाहिए।

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' });
  });
});

इस Angular diff को critically review करें।
standalone imports/providers, Reactive Forms nullable values, double submit,
service/UI boundary, HttpClient tests, unit/E2E coverage, any usage,
unnecessary subscriptions और accessibility issues check करें।
Issues को file, line और priority के साथ लौटाएँ।

Result और CTA

छोटे Angular project में vague prompt ने ngModel mix, UI text in service और failure test missing जैसी समस्याएँ दीं। जब task को analysis, service, form, HTTP test, E2E और review में तोड़ा, diff साफ और reviewable हुआ। Team rollout के लिए इन rules को CLAUDE.md में लिखें और repeatable process के लिए Claude Code training और consultation देखें।