Setting up HttpClient ​

Before you can use HttpClient in your app, you must configure it using dependency injection.

Providing HttpClient through dependency injection ​

HttpClient is provided using the provideHttpClient helper function, which most apps include in the application providers in app.config.ts.

If your app is using NgModule-based bootstrap instead, you can include provideHttpClient in the providers of your app's NgModule:

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

Configuring features of HttpClient ​

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

withFetch ​

By default, HttpClient uses the XMLHttpRequest API to make requests. The withFetch feature switches the client to use the fetch 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.

HELPFUL: Functional interceptors (through withInterceptors) have more predictable ordering and we recommend them over DI-based interceptors.

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 as well.

CRITICAL: You must configure an instance of HttpClient above the current injector, or this option is not valid and you'll get a runtime error when you try to use it.

withJsonpSupport() ​

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

HELPFUL: Prefer using CORS to make cross-domain requests instead of JSONP when possible.

withXsrfConfiguration(...) ​

Including this option allows for 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.

When HttpClientModule is present in multiple injectors, the behavior of interceptors is poorly defined and depends on the exact options and provider/import ordering.

Prefer provideHttpClient for multi-injector configurations, as it has more stable behavior. See the withRequestsMadeViaParent feature above.