Angular2 + typescript + jspm:没有Http的提供者(App - > Provider - > Http)

Question

我尝试使用system.js从Webpack迁移到JSPM.我们有简单的App组件.我正在阅读这篇文章Angular 2 Starter Setup with JSPM,SystemJS和Typescript in atom(第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没有NameService的提供者,但是他们谈论的是Angular2 alpha而且提供者中没有提供者,我们使用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

Answer 1

> = RC.5

添加HttpModule到进口AppModule:

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

<= RC.5

您需要HTTP_PROVIDERS在bootstrap中添加到提供者列表

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

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

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