Angular HTTP Client

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:

// Reactive: refetches automatically when userId() changes
userResource = httpResource<User>(() => `/api/users/${this.userId()}`);
// States: .isLoading() | .hasValue() | .error() | .value() | .reload()

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

• Interceptors