Инъекция http в службе дает "Нет провайдера для Http!" ошибка

Angular версия: 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)

Что я делаю неправильно?

Edit

Я изменил providers на viewProviders, и ошибка теперь исчезла!

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

Однако я не могу объяснить, почему это работает. http не просматривается ни одним представлением напрямую. Доступ к нему осуществляется только внутри GithubService. Итак, почему я должен объявить HTTP_PROVIDERS как viewProvider?

Изменить 2

Ну, я переместил объявление providers из AppComponent до того компонента, в котором он мне нужен, и теперь он работает! Поэтому при объявлении его на корневом уровне должно быть какое-то причуда.

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

На самом деле работают как providers, так и viewProviders. Оказывается, что viewProviders на самом деле более ограничительный и обеспечивает лучшую инкапсуляцию компонента. Подробнее см. в этой статье.

Ответы

Ответ 1

Хорошо, если вы идете с Providers:[HTTP_PROVIDERS], но его хорошо передать HTTP_PROVIDERS в bootstrap(). Вам не нужно использовать 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
    }
}

Ответ 2

Следуя этой ссылке

Angular2/http Exception no ConnectionBackend Ответ @abreneliere верен для меня при работе с Angular 2 Quickstart (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 { }

Ответ 4

Вы можете импортировать { HttpModule } в модуль, в котором объявлен ваш компонент, в котором вы используете инъекционную услугу, данный модуль не ленивый.