web-dev-qa-db-ja.com

サービスにhttpを挿入すると、「Httpのプロバイダーはありません！」エラー

角度バージョン：2.0.0-beta.13

私はhttpをサービスに注入しようとしています：

@Injectable()
export class GithubService {
    ...
    constructor(private http: Http) {
    }
}

アプリケーションのルートコンポーネントにプロバイダーとしてHTTP_PROVIDERSをリストしました。そのため、このプロバイダーは私のアプリケーションのすべてのコンポーネントで利用できるはずです。

@Component({
  providers: [HTTP_PROVIDERS],
})
export class AppComponent {}

ただし、このアプリケーションを実行すると、次のエラーが表示されます。

例外：エラー：キャッチされません（約束）：Httpのプロバイダーがありません！ （HttpReqComponent-> GithubService-> Http）

私は何を間違えていますか？

編集

providersをviewProvidersに変更しましたが、エラーはなくなりました！

@Component({
  viewProviders: [HTTP_PROVIDERS],
})
export class AppComponent {}

しかし、なぜこれが機能しているのか説明できません。 httpはどのビューからも直接アクセスされていません。 GithubService内でのみアクセスされます。それでは、なぜHTTP_PROVIDERSをviewProviderとして宣言する必要があるのですか？

Edit 2

さて、providers宣言をAppComponentから必要なコンポーネントに移動しましたが、動作するようになりました！そのため、ルートレベルで宣言する際にいくつかの癖がなければなりません。

@Component({
    providers: [HTTP_PROVIDERS, GithubService],
})
export class HttpReqComponent { }

実際、providersとviewProvidersの両方が機能します。 viewProvidersは実際にはより制限的であり、コンポーネントのより良いカプセル化を提供します。詳細については この記事 をご覧ください。

angularangular2-services
21
Naresh

_Providers:[HTTP_PROVIDERS]_を使用する場合は問題ありませんが、bootstrap()に_HTTP_PROVIDERS_を参照することをお勧めします。 viewProviderを使用する必要はありません。他の目的のためにあります。

_http.dev.js_が含まれていることを確認する必要があります（CDN/node_modules経由）。

_<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.13/http.dev.js"></script> 
_

次に、rootComponentで、

_import {HTTP_PROVIDERS} from 'angular2/http';
import {GithubService} from './GithubService';

bootstrap(rootComponent,[HTTP_PROVIDERS,GithubService]);

// if you reference HTTP_PROVIDERS here globally (in bootstrap), you don't require to use providers:[HTTP_PROVIDERS] in any component. 
// same way GithubService reference has been passed globally which would create single instance of GithubService (In case if you want)
_

次に、GithubServiceで

_import {Http} from 'angular2/http';

@Injectable()
export class GithubService {
    ...
    constructor(private http: Http) {  // this will work now without any error
    }
}
_
12
micronyks

このリンクをたどる

Angular2/http Exception no ConnectionBackend @abreneliereの答えは、Angular 2クイックスタート（- https://angular.io/ guide/quickstart ）そして、コンポーネントにサービスを追加しようとしていました。

答え：ファイル：app.module.tsコード：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, HttpModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
20
SoProgram

2.0.0-rc.5これは今：

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


@NgModule({
  imports: [
    HttpModule
  ]}

https://angular.io/docs/ts/latest/guide/server-communication.html

11
nikk wong

インポートできます{ HttpModule }は、コンポーネントが宣言されているモジュールに挿入します。ここで、注入可能なサービスを使用している場合、指定されたモジュールは遅延ロードされません。

0
Jassi