Angular2/http Exception no ConnectionBackend

Question

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>

[here is a new answer]stackoverflow.com/questions/40098413/… — DrMabuse
– DrMabuse, Commented Nov 21, 2016 at 19:47

Anthony Brenelière · Accepted Answer · 2016-08-31 12:32:59Z

20

From Angular 2 RC5 version, in your NgModule file, add:

import { HttpModule } from '@angular/http';

@NgModule({
    imports:      [
        ...
        HttpModule ]

answered Aug 31, 2016 at 12:32

Anthony Brenelière

63.9k16 gold badges49 silver badges59 bronze badges

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

3 Comments

Markus Over a year ago

why import and not provide?

Andrei Zhytkevich Over a year ago

@Markus, because HttpModule is a module (not a service) and it has to be imported.

Aniruddha Das Over a year ago

Yap. this is the way. I figured it out.

Sasxa · Accepted Answer · 2016-02-23 20:03:37Z

11

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: []
})

edited Feb 23, 2016 at 20:03

answered Feb 23, 2016 at 19:55

Sasxa

41.4k17 gold badges90 silver badges102 bronze badges

3 Comments

Fairbr0 Over a year ago

Just tested this and unfortunately the issue persists.

Sasxa Over a year ago

No problem. Welcome to SO!

Brad Kent Over a year ago

HTTP_PROVIDERS is no longer a thing

Matt Jensen · Accepted Answer · 2016-08-20 22:21:39Z

2

src/main.ts

import { HTTP_PROVIDERS, ConnectionBackend } from '@angular/http';

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ConnectionBackend
]);

Using [email protected] and [email protected]

answered Aug 20, 2016 at 22:21

Matt Jensen

1,58417 silver badges22 bronze badges

1 Comment

Aniruddha Das Over a year ago

any idea in final production release?

Collectives™ on Stack Overflow

Angular2/http Exception no ConnectionBackend

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related