Property 'get' does not exist on type 'HttpClientModule'

Question

Am very new to Angular js , Trying to learn it from youtube, and i was facing mentioned issue
in my code, I don't understand what was missing in my code

ERROR

am getting " Property 'get' does not exist on type 'HttpClientModule'" error when am trying to access get service of HttpClientModule.,
Below are the code details
app.component.ts file is

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 file is

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 file is

{   "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

You need to use HttpClient not HttpClientModule to make an http request.

In app.module.ts, import HttpClientModule (see "imports" below):

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

Then, import HttpClient in app.component.ts:

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

Now, change your AppComponent Ctor from

constructor(private http: HttpClientModule){}; 

to

constructor(private http: HttpClient){}; 

Answer 2

Beside you get this error if you did not pay attention on the imports for HTTPClient. Usually it defaults to

import { HttpClient } from 'selenium-webdriver/http';