在服务中注入 http 会给出“没有 Http 提供者！”错误答案

【问题标题】：Injecting http in a service gives "No provider for Http!" error在服务中注入 http 会给出“没有 Http 提供者！”错误
【发布时间】：2016-04-06 20:28:52
【问题描述】：

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)

我做错了什么？

编辑

我将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 实际上更具限制性，并提供了更好的组件封装。详情请见this article。

【问题讨论】：

你不需要 viewProvider，实际上我搜索它并没有找到任何参考，但我测试过它可以与 providers 以及 viewProviders 一起使用 。如果您仍然不确定，请创建一个 plunker 代码应用程序以准确查看。
这真的很奇怪，因为它应该可以工作。看到这个 plunkr：plnkr.co/edit/gG84YnQPItRSf0tIJSMK?p=preview。我有兴趣了解更多关于您的环境的信息 ;-) 谢谢！

标签： angular angular2-services

【解决方案1】：

点击此链接

Angular2/http Exception no ConnectionBackend 在使用 Angular 2 Quickstart (https://angular.io/guide/quickstart) 时，@abreneliere 的答案对我来说是正确的，并且我正在尝试向组件添加服务。

答案：文件：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 { }

【讨论】：

这对我来说是使用@angular/http: ~2.4.0 的诀窍。简单的解决方案。干杯！
工作就像一个魅力！ :)
在 Nativescript 3.0.0 上工作！谢谢！

【解决方案2】：

如果您使用 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
    }
}

【讨论】：

谢谢，@micronyks。 AFAIK，Angular 2 文档不鼓励使用引导程序来注册提供程序（请参阅here）。我现在通过将注册移动到需要它的组件来解决这个问题。请看我的Edit 2。
我也读到了 ;-) 我不认为它适用于像 ROUTER_PROVIDERS 或 HTTP_PROVIDERS 这样的 Angular2 提供者。我认为该评论是为了限制您的应用程序中提供者的范围。它“只是”一种组织应用程序的方式。也就是说，我认为在引导应用程序时有必要定义一些服务的用例。例如，当您希望为不同的部分提供共享服务时。
@micronyks，我发现另一个参考也建议不要使用引导程序来注册提供程序：请参阅here。现在我会坚持这个建议。感谢您的帮助。
我将您的答案标记为正确，因为您关于 provider 和 viewProviders 都应该工作的基本陈述确实是正确的。

【解决方案3】：

截至2.0.0-rc.5，现在是：

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


@NgModule({
  imports: [
    HttpModule
  ]}

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

【讨论】：

【解决方案4】：

您可以将{ HttpModule } 导入到声明了您的组件的模块中，在该模块中您正在使用可注入服务，因为模块不是延迟加载的。

【讨论】：