or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

index.mddocs/

Angular HTTP Client

Angular's HTTP client API provides a powerful, RxJS-based HTTP client for Angular applications. Built on XMLHttpRequest and Fetch API, it offers typed request/response objects, interceptors, error handling, and comprehensive testing support.

Package Information

  • Package Name: @angular/common
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/common
  • Subpath: /http

Core Imports

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { provideHttpClient, withInterceptors } from '@angular/common/http';

For specific functionality:

import { 
  HttpRequest, 
  HttpResponse, 
  HttpErrorResponse,
  HttpEventType 
} from '@angular/common/http';

Basic Usage

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({})
export class MyComponent {
  private http = inject(HttpClient);

  // GET request
  getUsers() {
    return this.http.get<User[]>('/api/users');
  }

  // POST request with typed response
  createUser(user: CreateUserRequest) {
    return this.http.post<User>('/api/users', user);
  }

  // Request with headers and params
  searchUsers(query: string) {
    const headers = new HttpHeaders().set('Authorization', 'Bearer token');
    const params = new HttpParams().set('q', query);
    
    return this.http.get<User[]>('/api/users/search', { headers, params });
  }
}

Architecture

The Angular HTTP client is built around several key components:

  • HttpClient: Main service for making HTTP requests with full RxJS integration
  • Request/Response System: Strongly-typed request and response objects with immutable design
  • Interceptor Chain: Middleware pattern for cross-cutting concerns like authentication, logging, and caching
  • Backend Abstraction: Pluggable backends (XMLHttpRequest, Fetch API, JSONP) with consistent interface
  • Provider System: Modern dependency injection configuration with feature flags
  • Context System: Type-safe request-scoped data sharing mechanism

Capabilities

HTTP Client Service

Core HTTP client service providing typed request methods with RxJS observables and comprehensive options support.

@Injectable({providedIn: 'root'})
class HttpClient {
  request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>;
  request(method: string, url: string, options?: RequestOptions): Observable<any>;
  
  get<T>(url: string, options?: RequestOptions): Observable<T>;
  post<T>(url: string, body: any, options?: RequestOptions): Observable<T>;
  put<T>(url: string, body: any, options?: RequestOptions): Observable<T>;
  patch<T>(url: string, body: any, options?: RequestOptions): Observable<T>;
  delete<T>(url: string, options?: RequestOptions): Observable<T>;
  head<T>(url: string, options?: RequestOptions): Observable<T>;
  options<T>(url: string, options?: RequestOptions): Observable<T>;
  jsonp<T>(url: string, callbackParam: string): Observable<T>;
}

interface RequestOptions {
  headers?: HttpHeaders | Record<string, string | string[]>;
  params?: HttpParams | Record<string, string | number | boolean | ReadonlyArray<string | number | boolean>>;
  context?: HttpContext;
  observe?: 'body' | 'events' | 'response';
  responseType?: 'arraybuffer' | 'blob' | 'json' | 'text';
  reportProgress?: boolean;
  withCredentials?: boolean;
  credentials?: RequestCredentials;
  transferCache?: {includeHeaders?: string[]} | boolean;
  timeout?: number;
  keepalive?: boolean;
  priority?: RequestPriority;
  cache?: RequestCache;
  mode?: RequestMode;
  redirect?: RequestRedirect;
  referrer?: string;
  integrity?: string;
}

HTTP Client

Request and Response Objects

Immutable request and response objects with comprehensive type safety and configuration options.

class HttpRequest<T> {
  readonly method: string;
  readonly url: string;
  readonly urlWithParams: string;
  readonly body: T | null;
  readonly headers: HttpHeaders;
  readonly params: HttpParams;
  readonly context: HttpContext;
  readonly reportProgress: boolean;
  readonly responseType: 'arraybuffer' | 'blob' | 'json' | 'text';
  readonly withCredentials: boolean;
  readonly credentials: RequestCredentials;
  readonly keepalive: boolean;
  readonly priority: RequestPriority;
  readonly cache: RequestCache;
  readonly mode: RequestMode;
  readonly redirect: RequestRedirect;
  readonly referrer: string;
  readonly integrity: string;
  readonly transferCache?: {includeHeaders?: string[]} | boolean;
  readonly timeout?: number;
  
  clone(update?: Partial<HttpRequest<any>>): HttpRequest<T>;
  serializeBody(): ArrayBuffer | Blob | FormData | URLSearchParams | string | null;
}

class HttpResponse<T> extends HttpResponseBase {
  readonly body: T | null;
  readonly headers: HttpHeaders;
  readonly status: number;
  readonly statusText: string;
  readonly url: string | null;
  readonly ok: boolean;
  readonly type: HttpEventType.Response;
  readonly redirected?: boolean;
  readonly responseType?: ResponseType;
  
  clone(update?: Partial<HttpResponse<any>>): HttpResponse<T>;
}

class HttpErrorResponse extends HttpResponseBase implements Error {
  readonly name: string;
  readonly message: string;
  readonly error: any | null;
  readonly ok: boolean;
}

Request and Response

Headers and Parameters

Immutable, fluent APIs for managing HTTP headers and URL parameters with full type safety.

class HttpHeaders {
  constructor(headers?: string | {[name: string]: string | number | (string | number)[]} | Headers);
  
  has(name: string): boolean;
  get(name: string): string | null;
  getAll(name: string): string[] | null;
  keys(): string[];
  append(name: string, value: string | string[]): HttpHeaders;
  set(name: string, value: string | string[]): HttpHeaders;
  delete(name: string, value?: string | string[]): HttpHeaders;
}

class HttpParams {
  constructor(options?: HttpParamsOptions);
  
  has(param: string): boolean;
  get(param: string): string | null;
  getAll(param: string): string[] | null;
  keys(): string[];
  append(param: string, value: string | number | boolean): HttpParams;
  appendAll(params: {[param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>}): HttpParams;
  set(param: string, value: string | number | boolean): HttpParams;
  delete(param: string, value?: string | number | boolean): HttpParams;
  toString(): string;
}

interface HttpParamsOptions {
  fromString?: string;
  fromObject?: {[param: string]: string | number | boolean | ReadonlyArray<string | number | boolean>};
  encoder?: HttpParameterCodec;
}

Headers and Parameters

HTTP Interceptors

Middleware system for cross-cutting concerns with both functional and class-based approaches.

type HttpInterceptorFn = (
  req: HttpRequest<unknown>,
  next: HttpHandlerFn,
) => Observable<HttpEvent<unknown>>;

type HttpHandlerFn = (req: HttpRequest<unknown>) => Observable<HttpEvent<unknown>>;

interface HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
}

const HTTP_INTERCEPTORS: InjectionToken<readonly HttpInterceptor[]>;

Interceptors

Provider Configuration

Modern dependency injection configuration with feature flags and composable setup.

function provideHttpClient(...features: HttpFeature<HttpFeatureKind>[]): EnvironmentProviders;

function withInterceptors(interceptorFns: HttpInterceptorFn[]): HttpFeature<HttpFeatureKind.Interceptors>;
function withInterceptorsFromDi(): HttpFeature<HttpFeatureKind.LegacyInterceptors>;
function withFetch(): HttpFeature<HttpFeatureKind.Fetch>;
function withJsonpSupport(): HttpFeature<HttpFeatureKind.JsonpSupport>;
function withXsrfConfiguration(options: {cookieName?: string; headerName?: string}): HttpFeature<HttpFeatureKind.CustomXsrfConfiguration>;
function withNoXsrfProtection(): HttpFeature<HttpFeatureKind.NoXsrfProtection>;
function withRequestsMadeViaParent(): HttpFeature<HttpFeatureKind.RequestsMadeViaParent>;

enum HttpFeatureKind {
  Interceptors,
  LegacyInterceptors,
  CustomXsrfConfiguration,
  NoXsrfProtection,
  JsonpSupport,
  RequestsMadeViaParent,
  Fetch,
}

Provider Configuration

Context System

Type-safe mechanism for sharing data across the request lifecycle with token-based access.

class HttpContext {
  set<T>(token: HttpContextToken<T>, value: T): HttpContext;
  get<T>(token: HttpContextToken<T>): T;
  delete(token: HttpContextToken<unknown>): HttpContext;
  has(token: HttpContextToken<unknown>): boolean;
  keys(): IterableIterator<HttpContextToken<unknown>>;
}

class HttpContextToken<T> {
  constructor(public readonly defaultValue: () => T);
}

Context System

HTTP Resource API (Experimental)

Signal-based reactive HTTP resource for automatic request management and caching using Angular's Resource system.

const httpResource: HttpResourceFn;

interface HttpResourceFn {
  <T>(request: HttpResourceRequest, options?: HttpResourceOptions): HttpResourceRef<T>;
  arrayBuffer(request: HttpResourceRequest, options?: HttpResourceOptions): HttpResourceRef<ArrayBuffer>;
  blob(request: HttpResourceRequest, options?: HttpResourceOptions): HttpResourceRef<Blob>;
  text(request: HttpResourceRequest, options?: HttpResourceOptions): HttpResourceRef<string>;
}

interface HttpResourceRequest {
  url: string | Signal<string>;
  method?: string;
  body?: any;
  headers?: HttpHeaders | Record<string, string | string[]>;
  params?: HttpParams | Record<string, string | number | boolean | ReadonlyArray<string | number | boolean>>;
}

interface HttpResourceOptions {
  injector?: Injector;
}

interface HttpResourceRef<T> extends ResourceRef<T> {
  readonly headers: Signal<HttpHeaders | undefined>;
  readonly progress: Signal<HttpProgressEvent | undefined>;
  readonly statusCode: Signal<number | undefined>;
}

interface HttpTransferCacheOptions {
  includeHeaders?: string[];
}

HTTP Resource API

Types

type HttpEvent<T> = 
  | HttpSentEvent
  | HttpHeaderResponse  
  | HttpResponse<T>
  | HttpDownloadProgressEvent
  | HttpUploadProgressEvent
  | HttpUserEvent<T>;

enum HttpEventType {
  Sent,
  UploadProgress,
  ResponseHeader, 
  DownloadProgress,
  Response,
  User
}

enum HttpStatusCode {
  Continue = 100,
  SwitchingProtocols = 101,
  Processing = 102,
  EarlyHints = 103,
  Ok = 200,
  Created = 201,
  Accepted = 202,
  NonAuthoritativeInformation = 203,
  NoContent = 204,
  ResetContent = 205,
  PartialContent = 206,
  MultiStatus = 207,
  AlreadyReported = 208,
  ImUsed = 226,
  MultipleChoices = 300,
  MovedPermanently = 301,
  Found = 302,
  SeeOther = 303,
  NotModified = 304,
  UseProxy = 305,
  Unused = 306,
  TemporaryRedirect = 307,
  PermanentRedirect = 308,
  BadRequest = 400,
  Unauthorized = 401,
  PaymentRequired = 402,
  Forbidden = 403,
  NotFound = 404,
  MethodNotAllowed = 405,
  NotAcceptable = 406,
  ProxyAuthenticationRequired = 407,
  RequestTimeout = 408,
  Conflict = 409,
  Gone = 410,
  LengthRequired = 411,
  PreconditionFailed = 412,
  PayloadTooLarge = 413,
  UriTooLong = 414,
  UnsupportedMediaType = 415,
  RangeNotSatisfiable = 416,
  ExpectationFailed = 417,
  ImATeapot = 418,
  MisdirectedRequest = 421,
  UnprocessableEntity = 422,
  Locked = 423,
  FailedDependency = 424,
  TooEarly = 425,
  UpgradeRequired = 426,
  PreconditionRequired = 428,
  TooManyRequests = 429,
  RequestHeaderFieldsTooLarge = 431,
  UnavailableForLegalReasons = 451,
  InternalServerError = 500,
  NotImplemented = 501,
  BadGateway = 502,
  ServiceUnavailable = 503,
  GatewayTimeout = 504,
  HttpVersionNotSupported = 505,
  VariantAlsoNegotiates = 506,
  InsufficientStorage = 507,
  LoopDetected = 508,
  NotExtended = 510,
  NetworkAuthenticationRequired = 511
}

interface HttpParameterCodec {
  encodeKey(key: string): string;
  encodeValue(value: string): string;
  decodeKey(key: string): string;
  decodeValue(value: string): string;
}

interface HttpTransferCacheOptions {
  includeHeaders?: string[];
}