Property ‚get‘ existiert nicht auf Typ ‚HttpClientModule‘

Question

Am sehr neu für Angular js, es von youtube versuchen zu lernen, und ich war mit Blick erwähnte Problem
in meinem Code, ich verstehe nicht, was fehlte in meinem Code

eRROR

sind immer "Property 'get' nicht auf Typ existiert 'HttpClientModule'" Fehler, wenn zu bekommen Dienst von HttpClientModule zuzugreifen versuchen.,
im Folgenden sind die Code-Details
a pp.component.ts Datei ist

import { Component,OnInit } from '@angular/core'; 
    import {HttpClientModule} from '@angular/common/http'; 
    @Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent { 

    constructor(private http:HttpClientModule){}; 
    title = 'app'; 
    ngOnInit() { 
    this.http.get('https://my-json-server.typicode.com/techsithgit/json-faker- 
    directory/profiles'). 
    subscribe((data)=>{ 
     console.log(data); 
    }); 

    } 

} 

app.module.ts Datei

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

import { AppComponent } from './app.component'; 

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

Package.json Datei

ist

{ 
    "name": "trust", 
    "version": "0.0.0", 
    "license": "MIT", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^5.0.2", 
    "@angular/common": "^5.0.2", 
    "@angular/compiler": "^5.0.2", 
    "@angular/compiler-cli": "^5.0.2", 
    "@angular/core": "^5.0.2", 
    "@angular/forms": "^5.0.2", 
    "@angular/http": "^5.0.2", 
    "@angular/platform-browser": "^5.0.2", 
    "@angular/platform-browser-dynamic": "^5.0.2", 
    "@angular/platform-server": "^5.0.2", 
    "@angular/router": "^5.0.2", 
    "core-js": "^2.4.1", 
    "rxjs": "^5.4.2", 
    "typescript": "^2.6.1", 
    "zone.js": "^0.8.18" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.4.9", 
    "@angular/compiler-cli": "^4.2.4", 
    "@angular/language-service": "^4.2.4", 
    "@types/jasmine": "~2.5.53", 
    "@types/jasminewd2": "~2.0.2", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~3.2.0", 
    "jasmine-core": "~2.6.2", 
    "jasmine-spec-reporter": "~4.1.0", 
    "karma": "~1.7.0", 
    "karma-chrome-launcher": "~2.1.1", 
    "karma-cli": "~1.0.1", 
    "karma-coverage-istanbul-reporter": "^1.2.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.2.0", 
    "tslint": "~5.7.0", 
    "typescript": "~2.3.3" 
    } 
} 

Answer 1

Sie müssen HttpClientModule verwenden HttpClient nicht zu machen HTTP-Anfrage

In app.module.ts, Import HttpClientModule (siehe "Import" weiter unten):

import { HttpClientModule } from '@angular/common/http'; 
@NgModule({ 
    imports: [ 
      HttpClientModule, 
    ... 
    ], 
    ... 
}) 
export class AppModule { } 

Dann Import HttpClient in app.component.ts:

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

Ändern Sie jetzt Ihre AppComponent Ctor von

constructor(private http: HttpClientModule){}; 

zu

constructor(private http: HttpClient){};