http get call to api in Angular failing

Question

Have the following code:

#home.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private http: HttpClientModule) {}
  id: number;
  private headers = new Headers({ 'Content-Type': 'application/json' });
  person = [];
  fetchData = function() {
    this.http
      .get('http://localhost:5555/person')
      .subscribe((res: Response) => {
        this.person = res;
      });
  };

  deleteProduct = function(id) {
    if (confirm('Are you sure?')) {
      const url = `${'http://localhost:5555/person'}/${id}`;
      return this.http
        .delete(url, { headers: this.headers })
        .toPromise()
        .then(() => {
          this.fetchData();
        });
    }
  };

  ngOnInit() {
    this.fetchData();
  }
}

When I load this page I get the following error in the browser console:

HomeComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: this.http.get is not a function
    at HomeComponent.fetchData (home.component.ts:16)
    at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.ngOnInit (home.component.ts:35)
    at checkAndUpdateDirectiveInline (core.js:20644)
    at checkAndUpdateNodeInline (core.js:21908)
    at checkAndUpdateNode (core.js:21870)
    at debugCheckAndUpdateNode (core.js:22504)
    at debugCheckDirectivesFn (core.js:22464)
    at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:22456)
    at checkAndUpdateView (core.js:21852)

Why is .get failing here? vscode is not screaming at me. This is version 7 of angular.

Sajeetharan · Accepted Answer · 2018-11-28 16:38:43Z

3

Your constructor param should be from HttpClient not HttpClientModule,

Change the import as,

import { HttpClient } from '@angular/common/http';

and the constructor as,

constructor(private http: HttpClient) {}

answered Nov 28, 2018 at 16:38

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Mark Locklear Over a year ago

I thought HttpClientModule was the latest and greatest?

Sajeetharan Over a year ago

yes its the latest, but that should be under Module.ts not component.ts

SiddAjmera · Accepted Answer · 2018-11-28 16:38:54Z

HttpClientModule is generally added to the imports array of your NgModule. HttpClient is injected as a dependency in the Components or Services or Directives etc.

So

constructor(private http: HttpClientModule) {}

should be

constructor(private http: HttpClient) {}

Where: import { HttpClient } from '@angular/common/http';

PS: Another thing that I'd like to point out is, instead of writing anonymous functions, write named functions instead as that's something that aligns more with the Angular Style Guide.

So fetchData = function() {...} should be just fetchData () {...}

Collectives™ on Stack Overflow

http get call to api in Angular failing

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related