Create an Http injectable in an Angular2 service? - dependency-injection

Question

I'm trying to wrap http in a service, so that all db access is passing through my channel
the issue is, services cannot have injectables passed to their constructor (right?) so I have to construct it all myself. I'm using the code:
import {Http,HTTP_BINDINGS,XHRBackend,BaseRequestOptions} from 'http/http';
import {Injector,bind} from 'angular2/di'
...
var injector = Injector.resolveAndCreate([
BaseRequestOptions,
XHRBackend,
bind(Http).toFactory(
function(backend, defaultOptions) {
return new Http(backend, defaultOptions);
},
[XHRBackend, BaseRequestOptions])
]);
this.http = injector.get(Http);
but when trying to use it by:
this.http.get('./entities.json')
//Get the RxJS Subject
.toRx()
// Call map on the response observable to get the parsed people object
.map(res => res.json())
.subscribe(e => this.entities = e);
I get an error:
Error during instantiation of DBDriver! (Entities -> DBDriver).
angular2.dev.js:22367 ORIGINAL EXCEPTION: No provider for function () {}! (function (_backend, _defaultOptions) { -> function (_browserXHR, _baseResponseOptions) { -> function () {})

Answer 1

Make sure that HTTP is injected in your service
Note #Inject(http) at de service constructor
#Inject(Http) public http: Http
Note that http, at least at angular2 alpha45, is outside angular lib, therefore you have to manually add http lib
<script src="/node_modules/angular2/bundles/angular2.min.js"></script>
<script src="/node_modules/angular2/bundles/http.min.js"></script>
SERVICE
import {Http, Headers, HTTP_BINDINGS} from 'angular2/http';
import {Inject} from 'angular2/angular2'
constructor(#Inject(Http) public http: Http) {}
getQuote(): Promise<any> {
return new Promise((resolve, reject) => {
this.http.get('http://localhost:3001/api/random-quote')
.map(res => res.text())
.subscribe(
data => resolve(data),
err => this.logError(err),
() => console.log("Random Quote Complete")
);
})
}
COMPONENT
import {Component, bootstrap, CORE_DIRECTIVES} from 'angular2/angular2';
import {Http, Headers, HTTP_BINDINGS} from 'angular2/http';
import {ChuckService} from "./chuck-service";
#Component({
selector: 'hello-app',
template: `
{{quoteOfTheDay}}<br />
<button (click) = "getQuote()">Get new quote</button><br /><br />
`,
directives: [CORE_DIRECTIVES],
providers: [ChuckService, HTTP_BINDINGS]
})
export class HelloApp {
quoteOfTheDay: string = '';
constructor(public _chuckService: ChuckService) {
}
getQuote(){
this._chuckService.getQuote().then((resp) => this.quoteOfTheDay = resp);
}
}
bootstrap(HelloApp);
INDEX.HTML
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/systemjs/dist/system-csp-production.js"></script>