angular-http-resilience

Architecture overview

Component / Service
    │  typed request method
    ▼
ApiService (typed wrapper)
    │  Observable<T>
    ▼
HttpClient  ──► Interceptor chain ──► .NET API
              ├─ CorrelationIdInterceptor   (adds X-Correlation-Id header)
              ├─ RetryInterceptor           (exponential backoff on 5xx)
              └─ TimeoutInterceptor         (per-request timeout via HttpContext)

---

Typed service wrapper

BAD — scattered HttpClient calls with any

@Component({ ... })
export class ProductsComponent {
  products: any[] = [];

  constructor(private http: HttpClient) {
    // No typing, no error handling, no cleanup
    this.http.get('/api/products').subscribe((data: any) => {
      this.products = data;
    });
  }
}

GOOD — typed service with Observable<T>

// product.service.ts
export interface Product { id: number; name: string; price: number; }
export interface ApiError  { code: string; message: string; traceId: string; }

@Injectable({ providedIn: 'root' })
export class ProductService {
  private http = inject(HttpClient);
  private base = '/api/products';

  getAll(): Observable<Product[]> {
    return this.http.get<Product[]>(this.base);
  }

  getById(id: number): Observable<Product> {
    return this.http.get<Product>(`${this.base}/${id}`);
  }

  create(payload: Omit<Product, 'id'>): Observable<Product> {
    return this.http.post<Product>(this.base, payload);
  }
}

Note: http.get<T>() is a type assertion, not runtime validation. Validate with zod or a custom validator when schema correctness is critical.

---

Correlation-ID interceptor

Propagates a per-request ID from Angular to the .NET backend so distributed traces link frontend logs to backend logs.