如何使用 Angular 2（测试版和更新版本）加载 RxJS（和 zone.js / reflect-metadata）？答案

【问题标题】：How to load RxJS (and zone.js / reflect-metadata) with Angular 2 (beta and newer)?如何使用 Angular 2（测试版和更新版本）加载 RxJS（和 zone.js / reflect-metadata）？
【发布时间】：2016-03-22 23:52:01
【问题描述】：

从 Angular 2 Alpha 54 (changelog) 开始，RxJS 不再包含在 Angular 2 中。

更新：原来zone.js 和reflect-metadata 也被排除在外了。

因此，我现在收到以下错误（如在 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)

我的 package.json 文件 (^5.0.0-beta.0) 中有 RxJS，它已与 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>

我一直在尝试其他配置，但没有一个能成功。我的猜测是这相对简单，只是我缺乏理解或工具的使用方式阻止了我。

这是我的 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]);

我正在使用使用静态映射的 livereload Express 服务器为应用程序提供服务，这样即使 index.html 是从 /src 作为服务器和node_modules 实际上与src 处于同一级别，而不是在其中。

一如既往，我们将不胜感激。

【问题讨论】：

标签： javascript angular rxjs systemjs

【解决方案1】：

事实证明，通过在我的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');

我实际上已经尝试过了，但我没有意识到 zone.js 和 reflect-metadata 也不再包含在 Angular 2 中，我也遇到了这个问题。

对于那些感兴趣的人，我通过在我的 index.html 中包含 angular2-polyfills.js 文件最容易地解决了 zone.js 和 reflect-metadata 的不足：

<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>

现在我的应用程序可以像使用 Alpha 53 一样工作了。

【讨论】：

很棒的答案。刚刚注意到正确的 polyfills 链接是 <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
感谢您解决这个问题。
请注意，如果您使用的是包，在 node_modules/rxjs/bundles 目录中有一个类似的 Rx.js 包，可以避免进行任何配置。