| name | angular-http-client |
| description | Integrate HttpClient, Interceptors, and API interactions in Angular. Use when integrating HttpClient, writing interceptors, or handling API calls in Angular. (triggers: **/*.service.ts, **/*.interceptor.ts, HttpClient, HttpInterceptorFn, withInterceptors, httpResource, resource) |
HTTP Client
Priority: P1 (HIGH)
Principles
- Functional Interceptors: Use HttpInterceptorFn (e.g.,
(req, next) => next(req.clone({ setHeaders: { Authorization: token } }))). Clone requests with
req.clone( — class-based interceptors are deprecated. Register via **withInterceptors([...])
** in provideHttpClient.
- Typed Responses: Always type
http.post<T>(), http.get<T>(). Use inject(HttpClient) in
services (not constructor injection). Add provideHttpClient(withInterceptors([...]),
withFetch()) to app.config.ts.
- Services: Encapsulate all HTTP calls in Services. Never call
http in Components.
Signal-Based HTTP (Angular 17+)
Prefer httpResource() over manual subscribe for reactive data loading — it auto-refetches
when its signal inputs change:
userResource = httpResource<User>(() => `/api/users/${this.userId()}`);
Use resource<T, P>({ request: () => params(), loader: ... }) for non-HTTP async operations with
full .isLoading() lifecycle control.
Guidelines
- Caching: Implement caching in interceptors or using
shareReplay(1) in services.
- Error Handling: Handle errors in the service using
catchError or global interceptors,
not components. Use a notification service for display.
- Context: Use HttpContext to pass metadata to interceptors (e.g., skip error handling
or specific caching rules).
Anti-Patterns
- No HTTP in Components: Encapsulate all HTTP calls in Services.
- No class-based interceptors: Use
HttpInterceptorFn functional interceptors.
- No manual subscribe for GET: Use httpResource() or
toSignal(http.get(...)) instead.
References
