Angular2 + typescript + jspm：没有 Http 提供者（ App -> Provider -> Http ）

Posted 2023-03-13

【中文标题】Angular2 + typescript + jspm：没有 Http 提供者（ App -> Provider -> Http ）

【英文标题】：Angular2 + typescript + jspm : No provider for Http ( App -> Provider -> Http )

【发布时间】：2016-06-13 15:41:51

【问题描述】：

我尝试使用 system.js 从 Webpack 迁移到 JSPM。我们有简单的 App 组件。我正在闲置这篇文章Angular 2 Starter Setup with JSPM, SystemJS and Typescript in atom (Part 1)

import Component from 'angular2/core';
import Bus from './business.service';

@Component(
  selector: 'app',
  template: `
  <p>Hello World</p>
  `,
  providers:[Bus]
)
export class App 
  constructor(private bus : Bus)  

Http 的简单（业务）服务

import Injectable from 'angular2/core';
import Http, Response, Headers, RequestOptions from 'angular2/http';
import Observable     from 'rxjs/Observable';

@Injectable()
 export class Bus 

  constructor(private http: Http)

  

在 Webpack 中工作正常，但在使用 systemjs 时出现此错误

例外：没有 Http 提供程序！ (App -> Bus -> Http)

我读过Angular2 no provider for NameService，但他们谈论的是 Angular2 alpha 和 provider 中没有提供者，我们使用 beta@7

我也玩

import Component from 'angular2/core';
//import Bus from './business.service';
import Http, Response, Headers, RequestOptions from 'angular2/http';
@Component(
  selector: 'app',
  template: `
  <p>Hello World</p>
  `,
  providers:[Http]
)
export class App 
  constructor(private bus : Http)  

但错误更奇怪

例外：没有 ConnectionBackend 的提供者！ (App -> Http -> ConnectionBackend)

我什至尝试更改为 angular2-beta@6。还有 angular2-beta@1 你知道我做错了什么吗？谢谢

使用加载器版本：systemjs@0.19.23

【参考方案1】：

>= RC.5

将HttpModule 添加到AppModule 的导入中：

@NgModule(
  imports: [HttpModule],
  ...
)
export class AppModule 

您需要在引导程序中将HTTP_PROVIDERS 添加到提供程序列表中

import HTTP_PROVIDERS from 'angular2/http';
<!-- -->
bootstrap(AppComponent, [HTTP_PROVIDERS]);

另见https://angular.io/docs/ts/latest/api/http/HTTP_PROVIDERS-let.html

【讨论】：

请注意，此解决方案不再有效，因为最近的版本已删除 HTTP_PROVIDERS 导出。

您更新后的解决方案非常有用，非常感谢！点赞！这应该是公认的答案，因为它显示了破解前和破解后版本的解决方案。

【参考方案2】：

您需要在引导应用程序时定义 HTTP_PROVIDERS 提供程序：

import HTTP_PROVIDERS from 'angular2/http';

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

或者如果您想在组件级别指定它：

import Component from 'angular2/core';
//import Bus from './business.service';
import Http, Response, Headers, RequestOptions, HTTP_PROVIDERS from 'angular2/http';
@Component(
  selector: 'app',
  template: `
    <p>Hello World</p>
  `,
  providers:[HTTP_PROVIDERS] // <-----------
)
export class App 
  constructor(private bus : Http)  

【讨论】：

请注意，此解决方案不再有效，因为最近的版本已删除 HTTP_PROVIDERS 导出。