iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
HTTP_INTERCEPTORS is Angular’s dependency-injection token for registering class-based HTTP interceptors. With standalone provideHttpClient, registering the token is not enough: add withInterceptorsFromDi() to enable those interceptors. For new code, Angular recommends functional interceptors registered with withInterceptors([...]), which makes their order explicit.
What HTTP_INTERCEPTORS does
HTTP_INTERCEPTORS is a multi-provider token whose value is an array of class-based HttpInterceptor instances. Interceptors can inspect or modify outgoing requests and handle responses as they pass through the HTTP chain. Angular documents patterns including authentication headers, retries, caching, logging, loading indicators, deadlines, batching and polling; use them when an application needs that behavior, rather than adding middleware by default. See Angular’s HTTP_INTERCEPTORS API and interceptor guide.
Register a class-based interceptor with standalone HttpClient
In a standalone application, configure provideHttpClient with withInterceptorsFromDi(), then register each class under HTTP_INTERCEPTORS with multi: true:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →bootstrapApplication(App, {
providers: [
provideHttpClient(withInterceptorsFromDi()),
{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
],
});Why both registrations matter
multi: trueadds the class to the token’s interceptor array instead of replacing the provider value.withInterceptorsFromDi()tells the configuredHttpClientto use class-based interceptors from the injector.- Without that feature in this standalone configuration, the token registration alone does not enable the interceptor.
Angular documents the feature in its withInterceptorsFromDi API and covers client configuration in Setting up HttpClient.
#1 Best Overall
When to use functional interceptors instead
For new code, Angular recommends functional interceptors. Register them directly with withInterceptors:
provideHttpClient(withInterceptors([loggingInterceptor, cachingInterceptor]))The list order determines the interceptor chain order. Angular says this explicit ordering is more predictable, particularly in complex injector setups where provider ordering can be harder to reason about. The withInterceptors API documents functional registration. Angular’s withInterceptorsFromDi API also says to prefer withInterceptors and notes DI-provided interceptor support may be phased out in a later release; it does not specify a removal date.
Class-based and functional registration compared
| Approach | How it is registered | Standalone HttpClient configuration | Order | Angular guidance |
|---|---|---|---|---|
| Class-based | HTTP_INTERCEPTORS provider with multi: true |
Add withInterceptorsFromDi() |
Provider order can be harder to follow in complex hierarchical injector setups | Supported; Angular recommends functional interceptors for new code |
| Functional | Pass interceptor functions to withInterceptors([...]) |
Configure the functions in the provideHttpClient feature list |
The array explicitly determines chain order | Recommended for new code |
Changing requests and handling retries safely
Angular’s request and response objects are generally immutable. To change a request—for example, to add a header—clone it and pass the clone onward rather than modifying the original request object. Take extra care with deep mutations to a request body: a retry can run the interceptor again, so a mutation may be applied more than once. Angular discusses immutability and interceptor behavior in its interceptor guide.
Why an Angular HTTP interceptor may not run
- Standalone client is missing the DI feature: if the class is registered under
HTTP_INTERCEPTORS, ensure that the relevantprovideHttpClientconfiguration includeswithInterceptorsFromDi(). - The provider is not multi: use
multi: trueso the class contributes to the interceptor array. - You registered a functional interceptor as a class provider, or vice versa: class-based interceptors use the token; functional interceptors belong in the
withInterceptors([...])list. - The ordering is unexpected: inspect the configured chain and injector setup. With functional interceptors, the order in the array is the chain order.
Angular’s interceptor CLI generator documents its interceptor-generation command and options.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
