Fairbr0 Fairbr0 - 3 months ago 401
HTTP Question

Angular2/http Exception no ConnectionBackend

I attempting to use an angular2 http request, but I am getting the following error:
[Error] EXCEPTION: No provider for ConnectionBackend! (AppComponent -> Http -> ConnectionBackend)

I have setup a barebones app which has the same problem, and am at a loss to what is causing it.

Thanks in advance

app.component.ts

import {Component} from 'angular2/core';
import {Http, Headers} from 'angular2/http';

@Component({
selector: 'app',
template: `
<button (click)="getEmployee()">Get</button>
<p>{{employee.email}}</p>

`,
providers: [Http]
})

export class AppComponent {
employee: {"email": "bob"};
http: Http;

constructor(http:Http){
this.http = http;
}

getEmployee(){
this.http.get('localhost:8080/employee-rates?id=0')
.map(response => response.json()).subscribe(result => this.employee = result);
}


}


main.ts

import {AppComponent} from './app.component';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, HTTP_BINDINGS} from 'angular2/http';

bootstrap(AppComponent, [
HTTP_PROVIDERS, HTTP_BINDINGS
]);


index.html

<html>

<head>
<base href="/">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/es6-shim/es6-shim.min.js"></script>
<script src="js/systemjs/dist/system-polyfills.js"></script>

<script src="js/angular2/bundles/angular2-polyfills.js"></script>
<script src="js/systemjs/dist/system.src.js"></script>
<script src="js/rxjs/bundles/Rx.js"></script>
<script src="js/angular2/bundles/angular2.dev.js"></script>
<script src="js/angular2/bundles/http.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>

</head>

<!-- 3. Display the application -->
<body>
<div class='small-12'>
<app>Loading...</app>
</div>
</body>

</html>

Answer

Remove HTTP_BINDINGS from your code. They are deprecated and reference HTTP_PROVIDERS, so it's like you're using providers twice.

bootstrap(AppComponent, [HTTP_PROVIDERS]);

Also you don't need providers: [Http] in your component, since you injected HTTP_PROVIDERS in bootstrap. Adding it to the component's providers will create new instance of the service.

@Component({
  providers: []
})
Comments