如何加载RxJS(和zone.js /反射 - 元数据)与角2(测试版及更新版本) [英] How to load RxJS (and zone.js / reflect-metadata) with Angular 2 (beta and newer)

查看:227
本文介绍了如何加载RxJS(和zone.js /反射 - 元数据)与角2(测试版及更新版本)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

由于角2阿尔法54(的更新日志), RxJS 不再包含在角2。

As of Angular 2 Alpha 54 (changelog), RxJS is no longer included in Angular 2.

更新:原来, zone.js 反映的元数据也排除在外

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配置简称:

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 防爆preSS 服务器,以便像 HTTP调用://本地主机: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.

任何帮助,将一如既往地为AP preciated。

Any help would, as always, be appreciated.

推荐答案

所以,事实证明,这个问题是通过改变SystemJS配置在我的 index.html的文件:

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 反映的元数据也不再包括在角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 通过包括最容易体现的元数据在我的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>

现在我的应用程序的工作方式,因为它与阿尔法53一样。

Now my app works just as it did with Alpha 53.

这篇关于如何加载RxJS(和zone.js /反射 - 元数据)与角2(测试版及更新版本)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆