如何使用 Angular 2(测试版和更新版本)加载 RxJS(和 zone.js/reflect-metadata)? [英] How to load RxJS (and zone.js / reflect-metadata) with Angular 2 (beta and newer)?
问题描述
从 Angular 2 Alpha 54 开始(changelog)，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)
我的 package.json 文件 (^5.0.0-beta.0) 中有 RxJS，并且它已与 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.
推荐答案
因此，通过在我的 index.html 文件中将 SystemJS 配置更改为以下内容，可以轻松解决问题:
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');
我实际上已经尝试过，但我没有意识到 zone.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.
对于那些感兴趣的人，我通过包含 angular2-polyfills.js 最容易地解决了缺少 zone.js 和 reflect-metadata 的问题> 我的 index.html 中的文件:
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(测试版和更新版本)加载 RxJS(和 zone.js/reflect-metadata)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
