2016-02-23 15 views
11

Si sta tentando di utilizzare una richiesta http angular2, ma viene visualizzato il seguente errore: [Errore] ECCEZIONE: nessun provider per ConnectionBackend! (AppComponent -> Http -> ConnectionBackend)Angular2/http Eccezione no ConnectionBackend

Ho installato un'app di barebone che ha lo stesso problema e non riesco a capire cosa lo stia causando.

Grazie in anticipo

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> 
+0

[questa è una nuova risposta] http: // s tackoverflow.com/questions/40098413/angular-2-no-provider-for-connectionbackend – DrMabuse

risposta

11

Rimuovere HTTP_BINDINGS dal codice. Sono deprecati e fanno riferimento allo HTTP_PROVIDERS, quindi è come se stessi usando i provider due volte.

bootstrap(AppComponent, [HTTP_PROVIDERS]); 

Inoltre non è necessario providers: [Http] nel componente, dal momento che si iniettato HTTP_PROVIDERS in bootstrap. Aggiungendolo ai fornitori del componente creerà una nuova istanza del servizio.

@Component({ 
    providers: [] 
}) 
+1

Appena testato questo e purtroppo il problema persiste. – Fairbr0

+0

Ecco fatto, grazie mille! – Fairbr0

+1

Nessun problema. Benvenuto in SO! – Sasxa

1

src/main.ts

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

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    ConnectionBackend 
]); 

Utilizzando [email protected] e [email protected]

+0

qualche idea nella versione finale della produzione? –

+0

@AniruddhaNon ho idea, non funziona più? –

20

Da Angular 2 RC5 versione, nel file NgModule, aggiungere:

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

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

perché importare e non fornire? – Markus

+2

@Markus, perché 'HttpModule' è un ** modulo ** (non un servizio) e deve essere importato. –

+0

ha funzionato per me. Sto usando la versione RC5. – Manoj