Skip to main content

Using the HttpClient in a standalone Angular application

As you might know, Angular's HttpClient has many dependencies that we have to provide in Angular applications using it.

Interoperability using the HttpClientModule

As of Angular version 14.2.0-rc.0, there is no dedicated standalone API for the Angular HTTP client so we pass for example HttpClientModule to the importProvidersFrom function:

main.ts
import { HttpClientModule } from "@angular/common/http";
import { enableProdMode, importProvidersFrom } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser";

import { AppComponent } from "./app/app.component";
import { environment } from "./environments/environment";

if (environment.production) {
enableProdMode();
}

bootstrapApplication(AppComponent, {
providers: [importProvidersFrom(HttpClientModule)],
}).catch((err) => console.error(err));

Future standalone API

In a future Angular version, a function creating the necessary providers will be available. It might look something like this:

main.ts
import { provideHttpClient } from "@angular/common/http";
import { enableProdMode } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser";

import { AppComponent } from "./app/app.component";
import { environment } from "./environments/environment";

if (environment.production) {
enableProdMode();
}

bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
}).catch((err) => console.error(err));