The HttpClient Service provides Angular's primary API for making HTTP requests. It offers a simplified, RxJS-based interface for communicating with backend servers, supporting both traditional XHR and modern Fetch API backends. This document covers the HttpClient class, its backend implementations, request/response handling, and the reactive httpResource API.
For information about HTTP security features (XSRF, XSSI), see HTTP Security Features. For the Resource API patterns used by httpResource, see Resource and httpResource APIs.
The HttpClient system follows a layered architecture where the HttpClient service delegates to backend implementations through the HttpHandler interface.
Architecture Diagram: HttpClient component hierarchy
Sources: packages/common/http/src/client.ts96-97 packages/common/http/src/fetch.ts74-83 packages/common/http/src/xhr.ts108-113 packages/common/http/src/backend.ts13-17 packages/common/http/src/resource.ts28-31
The HttpClient creates HttpRequest objects and passes them through a chain of interceptors before reaching a backend implementation. The backend translates the request into native browser APIs (Fetch or XHR) and returns an Observable<HttpEvent>.
The HttpClient class in packages/common/http/src/client.ts96-1200 provides HTTP methods as instance methods that return RxJS Observables.
| Method | Purpose | Request Body |
|---|---|---|
get() | Retrieve data | None |
post() | Create resource | Required |
put() | Update resource | Required |
patch() | Partial update | Required |
delete() | Remove resource | Optional |
head() | Headers only | None |
options() | Allowed methods | None |
request() | Generic request | Optional |
Sources: packages/common/http/src/client.ts99-1200
Diagram: HttpClient method overload resolution
Each method has multiple overloads that vary based on:
observe: Controls return type ('body', 'response', or 'events') packages/common/http/src/client.ts27responseType: Determines how to parse the response body packages/common/http/src/request.ts100Sources: packages/common/http/src/client.ts104-250 packages/common/http/src/request.ts109-141
Sources: packages/common/http/src/request.ts109-141 packages/common/http/src/client.ts25-31
httpResourceAngular 19+ introduces httpResource, a reactive way to handle HTTP requests using Signals. It is built on top of the existing HttpClient infrastructure.
Diagram: Reactive data flow in httpResource
The httpResource function creates a Resource that automatically updates when its input signals (like the URL) change packages/common/http/src/resource.ts59-110 It returns an HttpResourceRef which exposes the response data, status codes, and headers as signals packages/common/http/src/resource_api.ts189-203
Sources: packages/common/http/src/resource.ts59-110 packages/common/http/src/resource_api.ts189-212
Angular provides two primary backend implementations.
| Feature | FetchBackend | HttpXhrBackend |
|---|---|---|
| Browser API | fetch() | XMLHttpRequest |
| File location | packages/common/http/src/fetch.ts74 | packages/common/http/src/xhr.ts108 |
| Upload progress | ❌ Not supported fetch.ts39 | ✅ Supported xhr.ts35-36 |
| Modern options | ✅ Full support | ⚠️ Limited support xhr.ts44-98 |
| Node.js support | ✅ v18+ fetch.ts67 | ❌ Browser only |
| SSR Default | ✅ Yes fetch.ts56-58 | ❌ No |
The FetchBackend in packages/common/http/src/fetch.ts74-112 uses the modern Fetch API. It is the default for SSR and recommended for modern browsers.
Key implementation details:
AbortController for request cancellation packages/common/http/src/fetch.ts86HTTP_FETCH_MAX_RESPONSE_SIZE packages/common/http/src/fetch.ts52-60Sources: packages/common/http/src/fetch.ts74-200
The HttpXhrBackend in packages/common/http/src/xhr.ts108-155 uses XMLHttpRequest. It is required for features like upload progress tracking which are not yet available in the standard Fetch API.
Key implementation details:
keepalive or priority will trigger warnings as they are not supported by XHR packages/common/http/src/xhr.ts44-98Sources: packages/common/http/src/xhr.ts108-155 packages/common/http/src/xhr.ts44-98
The HttpRequest<T> class in packages/common/http/src/request.ts153-215 represents an immutable HTTP request. To modify a request (e.g., in an interceptor), the clone() method must be used.
The HttpHeaders class in packages/common/http/src/headers.ts provides immutable header management. It handles case-insensitive header names and supports multiple values per header.
Sources: packages/common/http/src/request.ts153-215 packages/common/http/src/headers.ts24-290
Interceptors allow request/response transformation and side effects.
Diagram: HTTP interceptor chain execution
Sources: packages/common/http/src/interceptor.ts127-130 packages/common/http/src/interceptor.ts149-154
Angular supports both functional interceptors (HttpInterceptorFn) and legacy class-based interceptors (HttpInterceptor). Functional interceptors are executed in an injection context packages/common/http/src/interceptor.ts97-98
Sources: packages/common/http/src/interceptor.ts54-63 packages/common/http/src/interceptor.ts127-130
Both backends run network operations outside Angular's zone to minimize change detection cycles:
fetch() in NgZone.runOutsideAngular() packages/common/http/src/fetch.ts125-127TracingService to propagate context without triggering unnecessary cycles packages/common/http/src/xhr.ts109-117Sources: packages/common/http/src/fetch.ts125-127 packages/common/http/src/xhr.ts109-117
Refresh this wiki