Ke Vin Ke Vin - 3 months ago 136
AngularJS Question

ORIGINAL EXCEPTION: No provider for Http! in Angular2 while trying consume REST service with HTTP.GET

What I'm trying to achieve is to consume Restfull service with

HTTP.Get
in angular2, I'm just following some tutorial and read the documentation, but still I don't get it

Here is what I do, first below is my application structure, I created this project using Angular CLI Webpack

enter image description here

Then I created a service class using angular CLI command, "ng generate service restfull" then I updated my class so
restfull.service.ts
looked like this:

import { Injectable } from '@angular/core';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestfullService {

constructor(private http:Http) { }

getDashboard(){
return this.http.get('http://localhost:8080/localservice/getdashboard/HUT17').map((res:Response) => res.json());
}

}


Then here is my
app.component.ts


import { Component } from '@angular/core';
import { NavbarComponent } from './navbar';
import { RestfullService } from './restfull.service';
import { Observable } from 'rxjs/Rx';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [NavbarComponent],
providers: [RestfullService]
})

export class AppComponent {
title = 'app works!';

public active;

constructor(private _restfull: RestfullService) { }

getRest(){
this._restfull.getDashboard().subscribe(
data => {this.active = data},
err => console.error(err),
() => console.log('done loading foods')
);
}
}


I think that's all I need right? is there something I missed? it showed me this error in my firebug console:


Error: Uncaught (in promise): EXCEPTION: Error in ./AppComponent class
AppComponent_Host - inline template:0:0 ORIGINAL EXCEPTION: No
provider for Http! ORIGINAL STACKTRACE:
BaseException@http://localhost:4200/main.bundle.js:1811:23
AbstractProviderError@http://localhost:4200/main.bundle.js:28260:9
NoProviderError@http://localhost:4200/main.bundle.js:28297:9
ReflectiveInjector_throwOrNull@http://localhost:4200/main.bundle.js:56208:19 ReflectiveInjectorgetByKeyDefault@http://localhost:4200/main.bundle.js:56236:20
ReflectiveInjectorgetByKey@http://localhost:4200/main.bundle.js:56199:20
ReflectiveInjectorhttp://localhost:4200/main.bundle.js:56008:16
NgModuleInjectorhttp://localhost:4200/main.bundle.js:40727:40
anonymous/_View_AppComponent_Host0.prototype.createInternal@AppComponent.ngfactory.js:18:56
AppViewhttp://localhost:4200/main.bundle.js:56772:16
DebugAppViewhttp://localhost:4200/main.bundle.js:56985:20
ComponentFactoryhttp://localhost:4200/main.bundle.js:40380:27
ApplicationRef_http://localhost:4200/main.bundle.js:27082:23
PlatformRef_moduleDoBootstrap/<@http://localhost:4200/main.bundle.js:26940:82
PlatformRefmoduleDoBootstrap@http://localhost:4200/main.bundle.js:26940:13
PlatformRefhttp://localhost:4200/main.bundle.js:26919:21
Zonehttp://localhost:4200/polyfills.bundle.js:3389:20
NgZoneImpl/this.inner<.onInvoke@http://localhost:4200/main.bundle.js:44849:32
Zonehttp://localhost:4200/polyfills.bundle.js:3388:20
Zonehttp://localhost:4200/polyfills.bundle.js:3282:25
scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:3637:53
Zonehttp://localhost:4200/polyfills.bundle.js:3422:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost:4200/main.bundle.js:44840:32
Zonehttp://localhost:4200/polyfills.bundle.js:3421:24
Zonehttp://localhost:4200/polyfills.bundle.js:3322:29
drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:3540:26

ERROR CONTEXT: [object Object]


I think the point is "no provider for http" right? but I already put it at my
resfull.service.ts
class, what did i miss?

Answer

You have to provide HTTP_PROVIDERS for your application, like this:

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html',
    providers: [
        HTTP_PROVIDERS
    ],
    directives: []
})
export class AppComponent {
...
}