2016-02-23 2 views
11

私はangle2 HTTPリクエストを使用しようとしましたが、次のエラーが発生しました: [エラー]例外:ConnectionBackendのプロバイダがありません! (AppComponent - > Http - > ConnectionBackend)Angular2/http例外ConnectionBackend

私は同じ問題を抱えていて、それを引き起こしているものに迷っているベアボーンアプリをセットアップしました。事前に

おかげ

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

[ここをクリック新しい回答] http:// s tackoverflow.com/questions/40098413/angular-2-no-provider-for-connectionbackend – DrMabuse

答えて

11

コードからHTTP_BINDINGSを削除します。それらは非推奨であり、参照番号HTTP_PROVIDERSです。したがって、プロバイダを2度使用しているようです。あなたは、ブートストラップでHTTP_PROVIDERSを注入されたので、

bootstrap(AppComponent, [HTTP_PROVIDERS]); 

また、あなたは、あなたのコンポーネントでproviders: [Http]を必要としません。これをコンポーネントのプロバイダに追加すると、サービスの新しいインスタンスが作成されます。

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

これをテストしただけで残念なことに問題は解決しません。 – Fairbr0

+0

本当にありがとう! – Fairbr0

+1

問題ありません。ようこそ! – Sasxa

20

からを使用して

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

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    ConnectionBackend 
]); 

NgModuleファイルのAngular 2 RC5バージョンには、次のように追加します。

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

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

なぜインポートしないのですか? – Markus

+2

@Markus、 'HttpModule'は**モジュール**(サービスではありません)であり、インポートする必要があります。 –

+0

これは私のために働いた。私はRC5バージョンを使用しています。 – Manoj

関連する問題