cant inject http in angular2

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

   }

}

Günter Zöchbauer · Accepted Answer · 2016-11-30 13:51:12Z

4

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

answered Nov 30, 2016 at 13:51

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

acostela Over a year ago

Thank you so much. It's a bit confusing for me that you import one thing in the NgModule and another different in the component. I didn't know this have changed

Günter Zöchbauer Over a year ago

Http is just the most common used class, but it consists of a bunch of classes. Previously this was HTTP_PROVIDERS, not it's HttpModule.

Collectives™ on Stack Overflow

cant inject http in angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related