CODEWITHSUNDEEP
angular
surbhiGoel
surbhiGoel

Reputation: 1596

ERROR TypeError: this.dashboardService.getData is not a function

I am getting an error while calling a service from the component. I am trying to fetch some data from the URL provided which returns JSON. Every time I run this code, HTML loads successfully but URL is not called as it is giving the error on getData() that it is not a function Getting error while running this. What approach should be taken to resolve it?

this.dashboardService.getData what is the problem in this line.

Here is the code:

**app.component.ts**

import { Component } from '@angular/core';
import { DashboardService } from './dashboard.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  private apiUrl: "someURL";


  constructor(private dashboardService: DashboardService) { 
    this.getEntries();
  }


  getEntries(){
    this.dashboardService.getData(this.apiUrl).subscribe(data => {
      console.log("data" , data) ;
    })
  }


}



**dashboard.service.ts**

import { Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DashboardService {

  constructor(private http: Http) { }

  getData(apiUrl){
    return this.http.get(apiUrl)
     .map((res: Response) => res.json());
   }
}


**app.module.ts**

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { DashboardService } from './dashboard.service';


@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [DashboardService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 2

Views: 2884

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222672

Even though the error is this.dashboardService.getData it uses the HttpClientModule, since you do not have the HttpClientModule imported under imports it throws error.

to fix , add

 import { HttpClientModule } from '@angular/http';

also add it under imports.

imports: [
       BrowserModule,
       HttpClientModule
]

app.under module.ts

also inside your dashboardService

constructor(private http: HttpClient){
}

Upvotes: 2

Akanksha Gaur
Akanksha Gaur

Reputation: 2686

You are missing import of HttpModule in your AppModule

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';


    import { AppComponent } from './app.component';
    import { DashboardComponent } from './dashboard/dashboard.component';
    import { DashboardService } from './dashboard.service';
    import { HttpModule } from '@angular/http';

    @NgModule({
      declarations: [
        AppComponent,
        DashboardComponent
      ],
      imports: [
        BrowserModule,
       HttpModule
      ],
      providers: [DashboardService],
      bootstrap: [AppComponent]
    })

export class AppModule { }

Upvotes: 2

Related Questions