问题 如何使用Angular 2(beta和更新版本)加载RxJS(和zone.js / reflect-metadata)?


截至Angular 2 Alpha 54(更新日志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)

我有 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>

我一直在玩其他配置,但没有一个让我一路走来。我的猜测是,这是相对简单的,只是我缺乏理解或工具的使用方式阻止了我。

这是我的app.ts文件 app/app 在SystemJS配置中引用:

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 而不是在里面。

任何帮助都将一如既往地受到赞赏。


1933
2017-12-16 17:54


起源



答案:


事实证明,通过将SystemJS配置更改为my中的以下内容,可以轻松解决问题 index.html 文件:

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中,我也遇到了这个问题。

对于那些感兴趣的人,我找不到了 zone.js 和 reflect-metadata 最容易包括 angular2-polyfills.js 我的index.html文件:

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

现在我的应用程序就像使用Alpha 53一样。


14
2017-12-16 18:39



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


答案:


事实证明,通过将SystemJS配置更改为my中的以下内容,可以轻松解决问题 index.html 文件:

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中,我也遇到了这个问题。

对于那些感兴趣的人,我找不到了 zone.js 和 reflect-metadata 最容易包括 angular2-polyfills.js 我的index.html文件:

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

现在我的应用程序就像使用Alpha 53一样。


14
2017-12-16 18:39



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