javascript 如何使用 Angular 2（测试版和更新版本）加载 RxJS（和 zone.js/reflect-metadata）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34318885/
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 (and zone.js / reflect-metadata) with Angular 2 (beta and newer)?
提问by Michael Oryl
As of Angular 2 Alpha 54 (changelog), RxJSis no longer included in Angular 2.
从 Angular 2 Alpha 54（变更日志）开始，RxJS不再包含在 Angular 2 中。
Update: Turns out that zone.jsand reflect-metadataare also excluded.
更新：事实证明，zone.js也reflect-metadata被排除在外。
As a result, I now get the following errors (as seen in the Chrome dev console):
结果，我现在收到以下错误（如 Chrome 开发控制台中所示）：
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)
I have RxJSin 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 SystemJSat this time to get things running. Here's the body section from my index.htmlfile:
我有RxJS我的 package.json 文件 (^5.0.0-beta.0)，并且它已经安装了npm，但问题是我目前还不够熟悉，无法SystemJS运行。这是我的index.html文件中的正文部分：
<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.
我一直在玩其他配置，但没有一个让我一直在那里。我的猜测是这相对简单，只是我缺乏理解或工具的使用方式阻止了我。
Here's my app.ts file that is the app/appreferred to in the SystemJS config:
这是我app/app在 SystemJS 配置中引用的app.ts 文件：
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]);
I'm serving the app with a livereload Expressserver that uses static mappings so that calls like http://localhost:3000/node_modules/rxjs/Rx.jsare able to get the needed file even though index.htmlis served from /srcas the root of the server and node_modulesis actually at the same level as srcand not inside it.
我正在使用 livereloadExpress服务器为应用程序提供服务，该服务器使用静态映射，这样调用http://localhost:3000/node_modules/rxjs/Rx.js就能够获取所需的文件，即使它index.html是/src作为服务器的根提供的，node_modules并且实际上与它处于同一级别src而不是在其中。
Any help would, as always, be appreciated.
一如既往，任何帮助将不胜感激。
回答by Michael Oryl
So it turns out that the problem was fixed easily by changing the SystemJS config to the following in my index.htmlfile:
所以事实证明，通过在我的index.html文件中将 SystemJS 配置更改为以下内容，问题很容易解决：
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');
I had actually tried that, but what I failed to realize was that zone.jsand reflect-metadatawere also no longer included in Angular 2, and I was running into that problem as well.
我实际上已经试过了，但我没有意识到的是，zone.js和reflect-metadata也不再包含在角2，我是运行到这个问题为好。
For those interested, I got around the lack of zone.jsand reflect-metadatamost easily by including the angular2-polyfills.jsfile in my index.html:
对于那些感兴趣的人，我通过在我的 index.html 中包含该文件来解决缺乏zone.js和reflect-metadata最容易的问题angular2-polyfills.js：
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
Now my app works just as it did with Alpha 53.
现在我的应用程序就像在 Alpha 53 上一样工作。
