Question

我尝试使用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 - ＆gt; Bus - ＆gt; Http）

我看了Angular2 no provider for 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) { }
}

但错误甚至更奇怪

EXCEPTION：没有ConnectionBackend的提供者！（App - ＆gt; Http - ＆gt; ConnectionBackend）

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

使用加载程序版本：systemjs@0.19.23

Answer 1

＆gt; = RC.5

将HttpModule添加到AppModule的导入：

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

＆lt; = 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) { }
}

Angular2 + typescript + jspm：没有Http的提供者（App - ＆gt; Provider - ＆gt; Http）

2 个答案: