在服务中注入 http 会出现 "No provider for Http!" 错误

Question

Angular 版本：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？

编辑 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

关注这个link

在使用 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 { }

Answer 4

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

在服务中注入 http 会出现 "No provider for Http!" 错误

Injecting http in a service gives "No provider for Http!" error

angular2-services

angular