web-dev-qa-db-ja.com

RxJS（およびzone.js / Reflect-metadata）をAngular 2（ベータ以降）でロードする方法は？

Angular 2 Alpha 54（ changelog ）の時点で、RxJSはAngular 2に含まれなくなりました。

更新：zone.jsとreflect-metadataも除外されていることが判明しました。

その結果、次のエラーが発生します（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ファイルの本文セクションです。

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

私は他の構成で遊んでいますが、そこまで私を得ることができませんでした。私の推測では、これは比較的単純です。理解が不足している、またはツールの使用方法が私を阻んでいるだけです。

これは、SystemJS構成で参照されるapp/appである私のapp.tsファイルです。

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]);

静的マッピングを使用するlivereloadExpressサーバーを使用してアプリを提供しているため、http://localhost:3000/node_modules/rxjs/Rx.jsがindex.htmlからのルートとして提供されている場合でも/srcなどの呼び出しで必要なファイルを取得できます。サーバーとnode_modulesは、実際にはsrcと同じレベルにあり、内部にはありません。

いつものように、どんな助けでもありがたいです。

javascriptangularrxjssystemjs
11
Michael Oryl

したがって、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にzone.jsファイルを含めることで、reflect-metadataとangular2-polyfills.jsの不足を最も簡単に回避しました。

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

これで、私のアプリはAlpha53と同じように機能します。

14
Michael Oryl