将http定义为DI会给出EXCEPTION：未捕获（按承诺）：错误：DI错误

Question

I'm trying to use private http: Http and it gives me error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: DI Error

I'm using http in my component

component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Http} from '@angular/http';
import {Observable,Subscription} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { NouiFormatter } from 'ng2-nouislider';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-char-maker',
  templateUrl: './char-maker.component.html',
  styleUrls: ['./char-maker.component.css']
})
export class CharMakerComponent implements OnInit {
  constructor(
    private formBuilder: FormBuilder,
    private http: Http)
  { 
    var obj;
  }
  ngOnInit() {

}
}

If I comment private http: Http in constructor the error goes away. What I'm missing here?

Answer 1

You need to add HttpModule under imports,

@NgModule({
    imports: [
       HttpModule
]

Answer 2

For Angular v 4.3

You can use the HttpClientModule . Import it from

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

and add this to your imports

 imports: [
 HttpClientModule,
  //... more code
  ]

For < v4.3

You can just use the HttpModule and import it from

import { HttpModule }    from '@angular/http'

and add it to your imports