Angular Service 和 HttpClient 类型不存在

Question

I am trying to get a service working in Angular 5. This is what I have:

import { Injectable } from '@angular/core';


@Injectable()
export class DataService {

  constructor() { }

  getData() {
    // don't use 'any', type your data instead!
    return this.httpClient.get<any>('./assets/data.json');
  }

}

I'm getting the following error:

Property HttpClient does not exist on type DataService.

What am I missing?

Answer 1

You need to import HttpClient from the module like below

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

and you code should be like this

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

@Injectable()
export class DataService {

  constructor(private httpClient: HttpClient) { }

  getData() {
    // don't use 'any', type your data instead!
    return this.httpClient.get<any>('./assets/data.json');
  }

}

Answer 2

Try like this :

readmore about httpClient here

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

@Injectable()
export class DataService {

  constructor(private httpClient: HttpClient) { }

  getData() {
    // don't use 'any', type your data instead!
    return this.httpClient.get<any>('./assets/data.json');
  }

}

Answer 3

Consider updating the code as follows:

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";

@Injectable()
export class DataService {

  constructor(private httpClient: Http) { }

  getData() {
    // don't use 'any', type your data instead!
    return this.httpClient.get<any>('./assets/data.json');
  }

}

Let me know if it works.

Answer 4

Http Calls have been modified and moved to '@angular/common/http' as HttpClient, since the idea was supported by many developers since its move to '@angular/common/http' from Angular 4.3 and further imports of Http Module from @angular/http is deprecated from Angular 5.Check out the changes here : https://jaxenter.com/road-to-angular-5-133253.html .

Now to your question, you should import HttpClient Module and create an instance of it. So your code would be like:-

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

@Injectable() export class DataService {

constructor(private _httpClient: HttpClient) { }

getData() {
    // don't use 'any', type your data instead!
    return this._httpClient.get<any>('./assets/data.json');
}

}

Answer 5

For me the problem was that I didn't have the httpClient listed as private in my constructor.

Original Constructor:

constructor(
  httpClient: HttpClient
) { }

Updated Constructor that resolved the error:

constructor(
  private httpClient: HttpClient
) { }