34

I'm trying to access a JSON feed but after making the changes from the documentation I get the following error

"Cannot find name 'HttpClient'"

I've looked over the tutorial a few times but I'm struggling to find why I get this error.

My component where I perform the Http request.

rooms.parent.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
 /.../
})

export class RoomParentComponent implements OnInit {
  results: string[];

  // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Make the HTTP request:
    this.http.get(/.../).subscribe(data => {
      this.results = data;
    });
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
import { AppComponent } from './app.component';
import { RoomParentComponent } from './rooms.parent.component';

@NgModule({
  declarations: [
    AppComponent,
    RoomParentComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

How do I resolve the above error and inject the HttpClient into the constructor?

Edit: My Angular version is 4.3.2

3
  • which version of angular ? Commented Jul 28, 2017 at 14:05
  • You should move your http stuff into a service and then inject the service instead of HttpClient into your component. Commented Jul 28, 2017 at 14:10
  • @Akkusativobjekt why not?
    – The One
    Commented Sep 21, 2020 at 21:38

1 Answer 1

84

HttpClient got introduced in Angular 4.3.0 version. Also you have to make sure you have imported & injected HttpClientModule in your main AppModule's imports metadata.

// Import HttpClientModule from @angular/common/http in AppModule
import {HttpClientModule} from '@angular/common/http';


//in place where you wanted to use `HttpClient`
import { HttpClient } from '@angular/common/http';
5
  • 11
    It didn't say use import { HttpClient } from '@angular/common/http'; in the documentation but that has worked for me thank you! Commented Jul 28, 2017 at 14:26
  • 4
    The part saying "Before you can use the HttpClient, you need to install the HttpClientModule which provides it. This can be done in your application module, and is only necessary once." is particularly deceiving.
    – Emanuel
    Commented Sep 16, 2017 at 15:37
  • I needed to restart the application ng serve -o
    – Charleston
    Commented Sep 30, 2017 at 22:38
  • Docs on this omit the import for HttpClient as stated by @JoshuaDuxbury angular.io/guide/http
    – mattgreen
    Commented Nov 5, 2017 at 23:00
  • 1
    I don't know why, but VS Code does not give the usual suggestions for importing HttpClient / HttpClientModule. Copying your lines manually worked though! Thanks Commented Mar 14, 2022 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.