无法在angular2中注入http

Question

I'm trying to inject the http module inside my angular2 app but I'm getting the error.

Unexpected value 'Http' imported by the module 'AppModule'

This is what I'm trying.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';
import { AppComponent }  from './app.component';

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

And this is how I try to use it

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

@Component({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>
        Maintenance Name: <input type="text" [(ngModel)]="htmlToPublish.title"/>
        <textarea [(ngModel)]="htmlToPublish.html" rows="10" cols="50">Write here the HTML code that you want to publish
        </textarea> 
        <button (click)="sendHtml()">Publish</button>
       <p>
       {{htmlToPublish}}
       </p>
 `,
})

export class AppComponent  {

   constructor(public http: Http){

   } 

   name = 'Angular'; 
   htmlToPublish: HtmlPage

   public sendHtml() {
   // Here I want to use http that I injected in constructor

   }

}

Answer 1

Add HttpModule to imports to get Http provided

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'; // <<< changed
import { AppComponent }  from './app.component';

@NgModule({
    imports:      [ BrowserModule, FormsModule, HttpModule], // <<< changed
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

but where you inject Http you need

import { Http } from '@angular/http';