this.httpClientModule.get is not a function

Question

I'm just playing around with services in Angular for the first time and I get the following error:

ERROR TypeError: this.httpClientModule.get is not a function

my services file:

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class AlertsService {
    constructor(
        private httpClientModule: HttpClientModule
    ) {
        //
    }

    getAlerts() {
        console.warn(this.httpClientModule.get('api-data/alerts-data.json'));
    }
}

component file:

import { Component, OnInit, } from '@angular/core';
import { AlertsService } from '../alerts.service'

@Component({
    selector: 'at-alerts',
    templateUrl: './alerts.component.html',
    styleUrls: ['./alerts.component.scss'],
    providers: [AlertsService]
})

export class AlertsComponentEdit implements OnInit {
    constructor(
        private alertsService: AlertsService
    ) {
        //
    }

    ngOnInit() {
        this.alertsService.getAlerts();
    }
}

Mock data file (alerts-data.json):

[{
  "id": 1,
  "name": "Louis",
  "gender": "male"
}, {
  "id": 2,
  "name": "Jenna",
  "gender": "female"
}, {
  "id": 3,
  "name": "Tom",
  "gender": "male"
}];

From what I can tell get along with other methods like post etc should exist in httpClientModule, any idea how to resolve this error?

"playing around for the first time", maybe taking a look at the docs would be reasonable? angular.io/guide/http — Jota.Toledo
– Jota.Toledo, Commented Dec 18, 2017 at 17:53

Sajeetharan · Accepted Answer · 2017-12-18 17:46:19Z

3

There is nothing named get method inside httpClientModule.You need to inject HttpClient inside your constructor

constructor(private http: HttpClient) {}     

getAlerts() {
    console.warn(this.http.get('api-data/alerts-data.json'));
}

Also import the HttpClientModule in your app.module.ts

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

so your app.module will look like,

import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ],
  declarations: [
  ],
  exports: [
  ]
})
export class CoreModule { }

edited Dec 18, 2017 at 17:46

answered Dec 18, 2017 at 17:39

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

this.httpClientModule.get is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related