我无法获得使用RxJS的最小的Angular 2应用程序。我正在使用Typescript（tsc 1.6.2）和systemjs进行模块加载。我如何让systemjs正确加载Rx模块？我已经用尽了想法尝试，我会很感激任何指向我做错的事情。模块加载对我来说有点神奇。非常令人沮丧。如何使用systemjs在最小的Angular 2应用程序中加载RxJS？

的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）。

来源

2015-10-27 Toby

更新angular2公测0

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

更新2015年12月11日

Alpha46使用RxJS阿尔法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没有支架，并且在this conversation解释（我有同样的问题，大声笑）

这里有一个plnkr not failing。

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

来源

2015-10-28 03:38:38

埃里克，感谢您抽出时间回复！这解决了我的一部分神秘。对不起，花了这么长时间回到你身边，我花了大部分时间试图让同一个项目脱机工作（没有任何真正的成功，我必须说）。我使用的VSC和打字稿1.6.2，就是在你的例子中使用的相同transpiler。在“在线”版从** ** app.ts生成的代码有一个稍微不同的头，这似乎使所有的差异（它调用'System.register（...）'）。你有过任何成功编译并与VSC/TSC本地运行呢？ – Toby

您是否收到任何错误？事实上，在我的离线版本（我自己的项目）中，我有'import *'作为'...'的主题（与我的答案有点不同）。还有其他的东西吗？你的在线和离线版本有什么不同？？ –

所以你在运行时遇到了错误呢？或者它在默默地失败了吗？你是否使用了一些工具，比如JSPM，Webpack或者其他东西？你能创建一个repo，以便我可以克隆它并查看它吗？ –

对于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

来源

2015-12-12 19:35:58

发布这样的回答后Angular 4发布。尝试从Rxjs加载最低限度，因为即使AOT的Angular prod build也要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()); 
    } 

}

来源

2017-03-22 10:40:10 STEEL

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

回答

更新angular2公测0

相关问题