如何使用systemjs在最小的Angular 2应用程序中加载RxJS？

Question

我无法在地面使用RxJS获得最小的Angular 2应用程序。 我正在使用Typescript（tsc 1.6.2）和systemjs进行模块加载。 如何让systemjs正确加载Rx模块？ 我已经没有想法尝试，我会欣赏任何指向我做错的指针。 模块加载对我来说有点神奇。 很沮丧。

index.html ：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <script src="../node_modules/es6-shim/es6-shim.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/rx/dist/rx.lite.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
</head>

<body>
    <app>App loading...</app>
    <script>
        System.config({
            packages: { 'app': { defaultExtension: 'js' } }
        });
        System.import('app/app');
    </script>
</body>
</html>

app.ts ：

/// <reference path="../../node_modules/rx/ts/rx.all.d.ts" />
import { bootstrap, Component, View } from 'angular2/angular2';
import * as Rx from 'rx';

@Component({
    selector: 'app'
})
@View({
        template: `Rx Test`
})
export class App {
    subject: Rx.Subject<any> = new Rx.Subject<any>();
}
bootstrap(App);

SystemJS尝试加载不存在的文件：

一旦我在上面的代码中注释掉主题，一切都运行良好，因为不会尝试加载不存在的文件（并且没有加载rx）。

Answer 1

更新angular2 beta 0

Angular2不再在Angular2本身内捆绑RxJS。 现在您必须单独导入运算符。 这是一个重要的突破性变化，我在这里回答。 所以请参考这个答案，因为这个已经过时，不再适用。

2015年12月11日更新

Alpha46正在使用RxJS alpha 0.0.7（很快将为0.0.8）。 由于这个ng2 alpha版本你不再需要下面的解决方案，你现在可以直接从angular2/angular导入Observable ， Subject等，这样原来的答案就可以丢弃了

import {Observable, Subject} from 'angular2/angular2';

=====================================

Angular2不再使用旧的RxJS ，他们移动到新的RxJS 5 （又名RxJS Next），因此它将与Http和EventEmitter冲突。

所以首先删除导入和脚本到rx.lite.js.

相反，你必须这样做（你的配置中不需要脚本或映射）

编辑

这条线是为了让它在plnkr中工作，但在我的项目中我只需添加其他东西

Plnkr版本

import Subject from '@reactivex/rxjs/dist/cjs/Subject';

离线版

import * as Subject from '@reactivex/rxjs/dist/cjs/Subject';

关于离线版本的说明

如果您在本地项目中尝试第一种plnkr方法，则可能会收到此消息错误

TypeError: Subject_1.default is not a function

因此，对于本地（离线）版本，您应该使用第二种方法（使用星号）。

注意

Subject没有括号，这在对话中有解释（我有同样的问题，哈哈）

这是一个没有失败的人。

我希望它有所帮助。 如果我错过了什么，请告诉我;）

Answer 2

对于angular2 alpha52使用rxjs 5alpha.14

<script>
System.config({
  map: { rxjs: 'node_modules/rxjs' },
  packages: {
    rxjs: { defaultExtension: 'js' },
    'app': {defaultExtension: 'js'}
  }
});
System.import('app/app');
</script>

但是你必须像这个例子一样单独导入每个操作符

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

require('rxjs/add/operator/map');
require('rxjs/add/operator/scan');
require('rxjs/add/operator/mergemap');  //for flatmap
require('rxjs/add/operator/share');
require('rxjs/add/operator/combinelatest-static'); //for combinelatest

Answer 3

在Angular 4发布后发布此答案。 尝试从Rxjs加载最小值，因为即使使用AOT，Angular prod也会达到300kb

希望能帮助到你。

import { Injectable } from '@angular/core';
import {Http} from "@angular/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';// load this in main.ts

import {AllUserData} from "../../../shared/to/all-user-data";

@Injectable()
export class ThreadsService {

  constructor(private _http: Http) { }

  loadAllUserData(): Observable<AllUserData> {
    return this._http.get('/api/threads')
      .map(res => res.json());
  }

}

如何使用systemjs在最小的Angular 2应用程序中加载RxJS？

问题描述

3 个解决方案

解决方案1
9 已采纳 2015-10-28 03:38:38

更新angular2 beta 0

解决方案2
8 2015-12-12 19:35:58

解决方案3
2 2017-03-22 10:40:10

如何使用systemjs在最小的Angular 2应用程序中加载RxJS？

问题描述

3 个解决方案

解决方案1 9 已采纳 2015-10-28 03:38:38

更新angular2 beta 0

解决方案2 8 2015-12-12 19:35:58

解决方案3 2 2017-03-22 10:40:10

解决方案1
9 已采纳 2015-10-28 03:38:38

解决方案2
8 2015-12-12 19:35:58

解决方案3
2 2017-03-22 10:40:10