Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

HTTP: Setup for server communication

Before you can use HttpClient, you must add it to the application's root dependency injector.

Most apps do so in the providers array of ApplicationConfig in app.config.ts.

app.config.ts (excerpt)
      
      import { ApplicationConfig } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { importProvidersFrom } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(HttpClientModule),
  ]
};
    

You can then inject the HttpClient service as a dependency of an application class, as shown in the following ConfigService example.

app/config/config.service.ts (excerpt)
      
      import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}
    

You can run the live example / download example that accompanies this guide.

The sample app does not require a data server. It relies on the Angular in-memory-web-api, which replaces the HttpClient module's HttpBackend. The replacement service simulates the behavior of a REST-like backend.

Look at the bootstrapApplication() method in main.ts to see how it is configured.

Last reviewed on Wed Aug 16 2023