如何加载RxJS使用systemjs最小角2应用程序？ [英] How to load RxJS in a minimal Angular 2 app using systemjs?
问题描述
我无法得到使用RxJS离地最小角2应用程序。我使用的打字稿（TSC 1.6.2）和模块加载systemjs。我怎么systemjs正确加载的模块接收？我已经江郎才尽了尝试和我最好的AP preciate任何指针，我做错了什么。模块的加载有点魔力给我。非常令人沮丧的。
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.
的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尝试加载一个不存在的文件：
SystemJS attempts to load a file that does not exist:
![](\"http://i.stack.imgur.com/eIZ5v.png\")
当我注释掉上面的code在主题后，一切都正常运行，因为将没有试图加载不存在的文件（没有RX加载）
As soon as I comment out the subject in the code above, everything runs fine as there'll be no attempt to load the non-existent file (and no rx is loaded).
推荐答案
Angular2距离Angular2本身不再捆绑RxJS。现在，您必须单独导入操作。这是一个重要的重大更改，我回答这里。所以，请参考这个答案，因为这个人是过时的，不再适用。
Update angular2 beta 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.
更新2015年12月11日
Alpha46使用RxJS阿尔法0.0.7（即将0.0.8）。既然你不需要更多下面的解决方案这个NG2 alpha版，您现在可以导入观测，主题等等直接从 angular2 /角，所以原来的答案可以丢弃
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, Subject among others directly from angular2/angular, so the original answer can be discarded
import {Observable, Subject} from 'angular2/angular2';
=====================================
=====================================
Angular2是不再使用旧 RxJS ，他们搬到新的 RxJS 5 （又名RxJS下），所以它会与HTTP和EventEmitter碰撞。
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.
所以，首先删除导入和脚本rx.lite.js.
So first remove the import and the script to rx.lite.js.
相反，你需要做的（你需要在你的配置没有剧本，也映射）
Instead you have to do (you need no scripts nor mapping in your config)
修改
这行，使其在一个plnkr工作，但在我的项目，我只需要添加别的东西。
This line is to make it work in a plnkr, but in my projects I just have to add something else
的 Plnkr版本的
import Subject from '@reactivex/rxjs/dist/cjs/Subject';
的离线版的
import * as Subject from '@reactivex/rxjs/dist/cjs/Subject';
的注意有关脱机版的
如果您尝试plnkr第一种方法在您的本地项目，你可能会得到这样的信息错误
If you try the first approach for plnkr in your local projects you'll probably get this message error
TypeError: Subject_1.default is not a function
因此，对于本地（脱机）版本，您应该使用第二种方法（用星号）。
So for your local (offline) version you should use the second approach (with the asterisk).
的注意的
有在主题无支架和在的这个会话（我有同样的问题，大声笑）
There's no bracket in Subject and that's explained in this conversation (I had the same problem, lol)
下面是一个 plnkr没有失败。
我希望它能帮助。如果我错过了什么就告诉我;）
I hope it helps. If I missed something just tell me ;)
这篇关于如何加载RxJS使用systemjs最小角2应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
