Angular 4 - Cannot find name 'HttpClient'

Question

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

You should move your http stuff into a service and then inject the service instead of HttpClient into your component. — Akkusativobjekt
– Akkusativobjekt, Commented Jul 28, 2017 at 14:10

Pankaj Parkar · Accepted Answer · 2017-08-01 13:06:27Z

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';

edited Aug 1, 2017 at 13:06

answered Jul 28, 2017 at 14:06

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joshua Duxbury Over a year ago

It didn't say use import { HttpClient } from '@angular/common/http'; in the documentation but that has worked for me thank you!

Emanuel Over a year ago

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.

Charleston Over a year ago

I needed to restart the application ng serve -o

mattgreen Over a year ago

Docs on this omit the import for HttpClient as stated by @JoshuaDuxbury angular.io/guide/http

MikhailRatner Over a year ago

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

Collectives™ on Stack Overflow

Angular 4 - Cannot find name 'HttpClient'

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related