如何使用Angular 2（beta和更新版本）加载RxJS（和zone.js / reflect-metadata）？
[英]How to load RxJS (and zone.js / reflect-metadata) with Angular 2 (beta and newer)?
问题描述
As of Angular 2 Alpha 54 ( changelog ), RxJS is no longer included in Angular 2. 
从Angular 2 Alpha 54（ 更改日志 ）开始， RxJS不再包含在Angular 2中。
Update: Turns out that zone.js and reflect-metadata are 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 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. 我有RxJS在我的package.json文件（^ 5.0.0-beta.0），并已安装了npm ，但问题是，我只是不太熟悉足以与SystemJS在这个时候得到的东西运行。 Here's the body section from my index.html file: 这是我的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/app referred to in the SystemJS config: 这是我的app.ts文件，它是SystemJS配置中引用的app/app ：
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 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. 我正在使用一个使用静态映射的livereload Express服务器为应用程序提供服务，因此http://localhost:3000/node_modules/rxjs/Rx.js能够获取所需的文件，即使index.html是从/src作为服务器的根， node_modules实际上与src处于同一级别而不在其中。
Any help would, as always, be appreciated. 任何帮助都将一如既往地受到赞赏。
1 个解决方案
解决方案1
14 已采纳 2015-12-16 18:39:12
So it turns out that the problem was fixed easily by changing the SystemJS config to the following in my index.html file: 事实证明，通过在我的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.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也不再包含在Angular 2中，我也zone.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: 对于那些感兴趣的人，我通过在index.html中包含angular2-polyfills.js文件来最简单地解决缺少zone.js和reflect-metadata ：
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
Now my app works just as it did with Alpha 53. 现在我的应用程序就像使用Alpha 53一样。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.