如何使用Angular 2（beta和更新版本）加载RxJS（和zone.js / reflect-metadata）？ [英] How to load RxJS (and zone.js / reflect-metadata) with Angular 2 (beta and newer)?
问题描述
从Angular 2 Alpha 54开始（更改日志）， RxJS 不再包含在Angular 2中。
As of Angular 2 Alpha 54 (changelog), RxJS is no longer included in Angular 2.
更新：事实证明， zone.js 和 reflect-metadata 也被排除在外。
Update: Turns out that zone.js and reflect-metadata are also excluded.
因此，我现在收到以下错误（如Chrome开发者控制台中所示）：
As a result, I now get the following errors (as seen in the Chrome dev console):
system.src.js:4681 GET http://localhost:3000/rxjs/Subject 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/observable/fromPromise 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681
localhost/:1 Uncaught (in promise) Error: XHR error (404 Not Found) loading http://localhost:3000/rxjs/Subject(…)t @ system.src.js:4681g @ system.src.js:4681(anonymous function) @ system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/operator/toPromise 404 (Not Found)F @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681(anonymous function) @ system.src.js:4681
system.src.js:4681 GET http://localhost:3000/rxjs/Observable 404 (Not Found)
我有 RxJS 在我的package.json文件中（^ 5.0.0-beta.0），它已经安装了 npm ，但问题是我只是目前还不熟悉 SystemJS 来运行。这是我的 index.html 文件中的正文部分：
I have RxJS in my package.json file (^5.0.0-beta.0), and it has been installed with npm, but the issue is I just am not familiar enough with SystemJS at this time to get things running. Here's the body section from my index.html file:
<body>
<app></app> <!-- my main Angular2 tag, which is defined in app/app as referenced below -->
<script src="../node_modules/systemjs/dist/system.js"></script>
<script src="../node_modules/typescript/lib/typescript.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {'app': {defaultExtension: 'js'}}
});
System.import('./app/app');
</script>
<script src="http://localhost:35729/livereload.js"></script>
</body>
我一直在玩其他配置，但没有一个让我一路走来。我的猜测是，这是相对简单的，只是我缺乏理解或工具的使用方式阻止了我。
I have been playing around with other configurations, but none have gotten me all the way there. My guess is that this is relatively simple, it's just my lack of understanding or the way the tools get used that is stopping me.
这是我的app.ts文件， SystemJS配置中引用的 app / app ：
Here's my app.ts file that is the app/app referred to in the SystemJS config:
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {COMMON_DIRECTIVES} from 'angular2/common';
@Component({
selector: 'app',
directives: [],
template: `<div>{{greeting}}, world!</div>`
})
export class App {
greeting:string = 'Hello';
}
bootstrap(App, [COMMON_DIRECTIVES]);
我正在为应用提供livereload Express 使用静态映射的服务器，以便像 http：// localhost：3000 / node_modules / rxjs / Rx.js 这样的调用能够获得所需的文件，即使 index.html 作为服务器的根目录从 / src 提供， node_modules 实际上与 src 相同，而不在其中。
I'm serving the app with a livereload Express server that uses static mappings so that calls like http://localhost:3000/node_modules/rxjs/Rx.js are able to get the needed file even though index.html is served from /src as the root of the server and node_modules is actually at the same level as src and not inside it.
任何帮助都会一如既往，赞赏。
Any help would, as always, be appreciated.
推荐答案
事实证明，通过将SystemJS配置更改为以下内容，可以轻松解决问题code> index.html file：
So it turns out that the problem was fixed easily by changing the SystemJS config to the following in my index.html file:
System.config({
map: {
rxjs: 'node_modules/rxjs' // added this map section
},
packages: {
'app': {defaultExtension: 'js'},
'rxjs': {defaultExtension: 'js'} // and added this to packages
}
});
System.import('app/app');
我实际上已经尝试过，但我没有意识到的是区域.js 和 reflect-metadata 也不再包含在Angular 2中，我也遇到了这个问题。
I had actually tried that, but what I failed to realize was that zone.js and reflect-metadata were also no longer included in Angular 2, and I was running into that problem as well.
对于那些感兴趣的人，我遇到了缺少 zone.js 和 reflect-metadata 最容易通过在我的index.html中包含 angular2-polyfills.js 文件：
For those interested, I got around the lack of zone.js and reflect-metadata most easily by including the angular2-polyfills.js file in my index.html:
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
现在我的应用程序就像使用Alpha 53一样。
Now my app works just as it did with Alpha 53.
这篇关于如何使用Angular 2（beta和更新版本）加载RxJS（和zone.js / reflect-metadata）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
