HttpClientModule is deprecated in Angular 18, what's the replacement?

Question

I have a project I migrated to Angular 18 with a setup to use the HttpClient by importing the HttpClientModule.

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    ...
  ],
  declarations: [
    AppComponent,
    ...
 ],
  bootstrap: [ AppComponent ]
})
export class AppModule {} 

In v17 HttpClientModule everything was fine but now it is marked as deprecated.

Why is it deprecated and what is the replacement ?

Zootechnics

Answer 1

The HttpClientModule was superseeded by the already existing provideHttpClient() provider function.

@NgModule({
  imports: [
    BrowserModule,
    // Remove the module 
    ...
  ],
  declarations: [
    AppComponent,
    ...
 ],
 providers: [provideHttpClient()] // add it here
 bootstrap: [ AppComponent ]
})
export class AppModule {} 

If you see the following error: Type 'EnvironmentProviders' is not assignable to type 'Provider'., it means you were importing the HttpClientModule in a component. This shouldn't have happen in the first place. Simply remove the import.

If you are relies on standalone component, provideHttpClient() needs to be added to the providers when invoking bootstrapApplicati() :

boostrapApplication(AppComponent, {providers: [provideHttpClient()]});

---

The reason behind this change is that the HttpClientModule doubled-up the provideHttpClient() function that was introduced for standalone apps.

And here is an extract of the Angular source code, the module was really just providing the HttpClient. (No declarations, imports or export whatsoever)

@NgModule({
  providers: [provideHttpClient(withInterceptorsFromDi())],
})

export class HttpClientModule {}

So the team chose to deprecate it and the deprecation message suggests to use the provideHttpClient() provider function. This way devs would less be inclined to have both the module and the provider declared. Which was a common issue amongst new developers.

Zootechnics

Does not work for me. I'm getting: TS2322: Type 'EnvironmentProviders' is not assignable to type 'Provider'. – Bypass

You shouldn't have it in a component. – Zootechnics

What if there is no AppModule but a standalone AppComponent and a Service that injects an HttpClient? Where to provide the new form of the deprecated HttpClientModule? If I don't provide anything I get an "NullInjectorError: NullInjectorError: No provider for _HttpClient!" and you say provideHttpClient() shouldn't be used in the app component (which leads to the "Type 'EnvironmentProviders' is not assignable to type 'Provider'.") – Beveridge

@Beveridge add it to the providers when calling boostrapApplication – Zootechnics

Add this in, app.config.ts file and do not add import of HttpClient or HttpClientModule in app.component.ts. – Kesha

To use provideHttpClient() it must be imported from '@angular/common/http' – Lakh

Answer 2

You can also add this app.config.ts file.

export const appConfig: ApplicationConfig = {
  providers: [
    . . .
    provideHttpClient(withFetch())
  ]
};

Centiliter

Ths is what worked for me and not putting it in the provider inside the local module. The only change I did was to use provideHttpClient(withInterceptorsFromDi()) instead. – Acetyl

Answer 3

You need to add provideHttpClient() to app.config.ts:

Muhammad

Please do not upload images of code.. Also, there is no additional value in this answer. Other answer has suggested exactly the same. – Aleta

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Rowlett