acostela acostela - 9 days ago 9
TypeScript Question

cant inject http in angular2

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

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';