Javascript 如何使用 systemjs 在最小的 Angular 2 应用程序中加载 RxJS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33379851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load RxJS in a minimal Angular 2 app using systemjs?
提问by Toby
I'm unable to get a minimal Angular 2 application using RxJS off the ground. I'm using Typescript (tsc 1.6.2) and systemjs for module loading. How do I get systemjs to load the Rx module correctly? I've run out of ideas to try and I'd appreciate any pointer to what I'm doing wrong. Module loading is a bit of magic to me. Very frustrating.
我无法使用 RxJS 获得最小的 Angular 2 应用程序。我正在使用 Typescript (tsc 1.6.2) 和 systemjs 进行模块加载。如何让 systemjs 正确加载 Rx 模块？我已经没有任何想法可以尝试了，如果您能指出我做错了什么，我将不胜感激。模块加载对我来说有点神奇。非常令人沮丧。
index.html:
索引.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 attempts to load a file that does not exist:
SystemJS 尝试加载一个不存在的文件：
As soon as I comment out the subjectin the code above, everything runs fine as there'll be no attempt to load the non-existent file (and no rx is loaded).
一旦我注释掉上面代码中的主题，一切都会运行良好，因为不会尝试加载不存在的文件（并且没有加载 rx）。
采纳答案by Eric Martinez
Update angular2 beta 0
更新 angular2 测试版 0
Angular2 is no longer bundling RxJS within Angular2 itself. Now you must import the operators individually. This was an important breaking change which I answered here. So please refer to that answer since this one is obsolete and no longer applies.
Angular2 不再将 RxJS 捆绑在 Angular2 本身中。现在您必须单独导入运算符。这是我在这里回答的一个重要的突破性变化。所以请参考那个答案，因为这个答案已经过时并且不再适用。
Update 12/11/2015
更新 12/11/2015
Alpha46 is using RxJS alpha 0.0.7 (soon to be 0.0.8). Since this ng2 alpha version you need no more the solution below, you can now import Observable, Subjectamong others directly from angular2/angular, so the original answer can be discarded
Alpha46 正在使用 RxJS alpha 0.0.7（即将为 0.0.8）。由于这NG2 alpha版本，你不需要更多下面的解决方案，你现在可以导入Observable，Subject以及其他直接angular2/angular，所以原来的答案可以被丢弃
import {Observable, Subject} from 'angular2/angular2';
=====================================
======================================
Angular2 is not longer using the old RxJS, they moved to the new RxJS 5(aka RxJS Next) so it will collide with Http and EventEmitter.
Angular2 不再使用旧的RxJS，他们转移到新的RxJS 5（又名 RxJS Next），因此它会与 Http 和 EventEmitter 发生冲突。
So first remove the import and the script to rx.lite.js.
所以首先删除导入和脚本到 rx.lite.js。
Instead you have to do (you need no scripts nor mapping in your config)
相反，您必须这样做（您的配置中不需要脚本或映射）
Edit
编辑
This line is to make it work in a plnkr, but in my projects I just have to add something else
这一行是为了让它在 plnkr 中工作，但在我的项目中我只需要添加其他东西
Plnkr version
Plnkr 版本
import Subject from '@reactivex/rxjs/dist/cjs/Subject';
Offline version
离线版
import * as Subject from '@reactivex/rxjs/dist/cjs/Subject';
Note about offline version
离线版注意事项
If you try the first approach for plnkr in your local projects you'll probably get this message error
如果您在本地项目中尝试 plnkr 的第一种方法，您可能会收到此消息错误
TypeError: Subject_1.default is not a function
So for your local (offline) version you should use the second approach (with the asterisk).
因此，对于您的本地（离线）版本，您应该使用第二种方法（带星号）。
Note
笔记
There's no bracket in Subjectand that's explained in this conversation(I had the same problem, lol)
没有括号，Subject这在本次对话中进行了解释（我遇到了同样的问题，哈哈）
Here's a plnkr not failing.
I hope it helps. If I missed something just tell me ;)
我希望它有帮助。如果我错过了什么，请告诉我；)
回答by Murhaf Sousli
For angular2 alpha52 uses rxjs 5alpha.14
对于 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>
but you have to import each operator individually like this example
但是你必须像这个例子一样单独导入每个运算符
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
回答by STEEL
Posting this answer after Angular 4 release. Try to load bare minimum from Rxjs, since Angular prod build even with AOT is going 300kb
在 Angular 4 发布后发布此答案。尝试从 Rxjs 加载最低限度，因为即使使用 AOT Angular prod 构建也会达到 300kb
Hope it helps.
希望能帮助到你。
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());
}
}
