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

标签 javascript angular typescript rxjs

我无法使用 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 试图加载一个不存在的文件:

enter image description here

只要我在上面的代码中注释掉主题,一切都会正常运行,因为不会尝试加载不存在的文件(也不会加载 rx)。

最佳答案

更新angular2 beta 0

Angular2 不再在 Angular2 中捆绑 RxJS。现在您必须单独导入运算符。这是一个重要的突破性变化,我 answered here .因此,请引用该答案,因为该答案已过时且不再适用。

2015 年 12 月 11 日更新

Alpha46 使用 RxJS alpha 0.0.7(即将成为 0.0.8)。由于这个 ng2 alpha 版本你不再需要下面的解决方案,你现在可以直接从 angular2/angular 导入 ObservableSubject 等,所以原来的答案可以舍弃

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 中没有括号,这在 this conversation 中有解释。 (我遇到了同样的问题,哈哈)

这是一个 plnkr not failing .

希望对你有所帮助。如果我错过了什么,请告诉我 ;)

关于javascript - 如何使用 systemjs 在最小的 Angular 2 应用程序中加载 RxJS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33379851/

相关文章:

javascript - socket.io 自定义发出事件不起作用

javascript - 在 javascript/jquery 中读取/更新数组对象的数组

angular - ionic 2 返回 {"__zone_symbol__state":null ,"__zone_symbol__value" :"cyprus"}

javascript - 如何捕获异步非 promise 错误? (对特定错误使用react)

javascript - Firefox 插件 : new tab extension

javascript - Backbone 类属性? 'this.property' 在它的方法中不起作用?

json - 使用 angular2-highchart 绘制 JSON 数据

angular - SVG&CSS : label of marker path does not display in IE

typescript 2.2 接口(interface)扩展对象类型

typescript - D3 鼠标悬停和鼠标移出