Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
Say hello to Angular's future home!Check out Angular.devHome
/

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 bootstrapApplication() in main.ts.

main.ts (excerpt)
      
      import { bootstrapApplication } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { importProvidersFrom } from '@angular/core';

import {AppComponent} from './app/app.component';

bootstrapApplication(AppComponent, {
  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