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

Question

Угловая версия: 2.0.0-beta.13

Я пытаюсь внедрить http в сервис:

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

Я перечисленный HTTP_PROVIDERS в качестве поставщика в корневом компоненте моего приложения, так этот провайдер должен быть доступен для любого компонента в моем приложении:

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

Однако, когда я запускаю это приложение, я получаю следующее сообщение об ошибке:

EXCEPTION: Error: Uncaught (in promise): No provider for 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 на самом деле более ограничительный и обеспечивает лучшую инкапсуляцию компонента. См. this article.

Answer 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 
    } 
} 

Answer 2

По 2.0.0-rc.5 этого теперь:

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


@NgModule({ 
    imports: [ 
    HttpModule 
    ]} 

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

Answer 3

После этой ссылке

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

Answer 4

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