Setting up HttpClient

HttpClient is available for injection by default in Angular v21 and later.

Providing HttpClient through dependency injection

You can use the provideHttpClient helper function to configure the default HTTP feature set or add features in the application providers in app.config.ts.

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(/* add features here, such as withInterceptors(...) */)],
};

If your app is using NgModule-based bootstrap instead, you can include provideHttpClient in the providers of your app's NgModule to configure the default HTTP feature set or add features:

@NgModule({
  providers: [provideHttpClient(/* add features here, such as withInterceptors(...) */)],
  // ... other application configuration
})
export class AppModule {}

You can then inject the HttpClient service as a dependency of your components, services, or other classes:

@Service()
export class ConfigService {
  private http = inject(HttpClient);
  // This service can now make HTTP requests via `this.http`.
}

Configuring features of HttpClient

provideHttpClient accepts a list of optional feature configurations to enable or configure different aspects of the client. This section details the optional features and their usage.

withXhr

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(withXhr())],
};

By default, HttpClient uses the fetch API to make requests. The withXhr feature switches the client to use the XMLHttpRequest API instead.

fetch is a more modern API and is available in a few environments where XMLHttpRequest is not supported. It does have a few limitations, such as not producing upload progress events.

withInterceptors(...)

withInterceptors configures the set of interceptor functions which will process requests made through HttpClient. See the interceptor guide for more information.

withInterceptorsFromDi()

withInterceptorsFromDi includes the older style of class-based interceptors in the HttpClient configuration. See the interceptor guide for more information.

withRequestsMadeViaParent()

By default, when you configure HttpClient using provideHttpClient within a given injector, this configuration overrides any configuration for HttpClient which may be present in the parent injector.

When you add withRequestsMadeViaParent(), HttpClient is configured to instead pass requests up to the HttpClient instance in the parent injector, once they've passed through any configured interceptors at this level. This is useful if you want to add interceptors in a child injector while still sending the request through the parent injector's interceptors.

withJsonpSupport()

Including withJsonpSupport enables the .jsonp() method on HttpClient, which makes a GET request via the JSONP convention for cross-domain loading of data.

withXsrfConfiguration(...)

Including this option allows customization of HttpClient's built-in XSRF security functionality. See the security guide for more information.

withNoXsrfProtection()

Including this option disables HttpClient's built-in XSRF security functionality. See the security guide for more information.

HttpClientModule-based configuration

Some applications may configure HttpClient using the older API based on NgModules.

This table lists the NgModules available from @angular/common/http and how they relate to the provider configuration functions above.