web-dev-qa-db-ja.com

systemjsを使用して最小限のAngular 2アプリでRxJSを読み込む方法は？

最小限のAngular 2アプリケーションを地面からRxJSを使用して取得できません。TypeScript（tsc 1.6.2）とsystemjsを使用してモジュールをロードしています。systemjsをロードするにはどうすればよいですかRxモジュールを正しく使用できますか？私は試してみるアイデアを使い果たしましたが、私が間違っていることへのポインタに感謝します。モジュールの読み込みは、私にとってちょっとした魔法です。

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <script src="../node_modules/es6-shim/es6-shim.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/rx/dist/rx.lite.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
</head>

<body>
    <app>App loading...</app>
    <script>
        System.config({
            packages: { 'app': { defaultExtension: 'js' } }
        });
        System.import('app/app');
    </script>
</body>
</html>

app.ts：

/// <reference path="../../node_modules/rx/ts/rx.all.d.ts" />
import { bootstrap, Component, View } from 'angular2/angular2';
import * as Rx from 'rx';

@Component({
    selector: 'app'
})
@View({
        template: `Rx Test`
})
export class App {
    subject: Rx.Subject<any> = new Rx.Subject<any>();
}
bootstrap(App);

SystemJSは、存在しないファイルをロードしようとします。

enter image description here

上記のコードでsubjectをコメントアウトするとすぐに、存在しないファイルをロードする試みがないため、すべて正常に実行されます（そしてrxはロードされません）。

javascriptangulartypescriptrxjs
11
Toby

Angular2ベータ0を更新

Angular2は、RxJSをAngular2自体にバンドルしなくなりました。ここで、演算子を個別にインポートする必要があります。これは重要な重大な変更でした ここで回答 。この回答は廃止され、適用されなくなったため、その回答を参照してください。

2015年12月11日更新

Alpha46はRxJS alpha 0.0.7を使用しています（すぐに0.0.8になります）。このng2アルファバージョンでは、以下の解決策は不要なので、Observable、Subjectをangular2/angularから直接インポートできるようになったため、元の回答を破棄できます。

import {Observable, Subject} from 'angular2/angular2';

=====================================

Angular2は古い RxJS を使用しなくなったため、新しい RxJS 5 （別名RxJS Next）に移動したため、HttpおよびEventEmitterと衝突します。

そのため、最初にrx.lite.jsへのインポートとスクリプトを削除します。

代わりに、あなたはする必要があります（あなたの設定でスクリプトもマッピングも必要ありません）

編集

この行はplnkrで動作するようにするためのものですが、私のプロジェクトでは何か他のものを追加する必要があります

Plnkrバージョン

import Subject from '@reactivex/rxjs/dist/cjs/Subject';

オフラインバージョン

import * as Subject from '@reactivex/rxjs/dist/cjs/Subject';

オフラインバージョンに関する注意

ローカルプロジェクトでplnkrの最初のアプローチを試みると、おそらくこのメッセージエラーが表示されます。

TypeError: Subject_1.default is not a function

したがって、ローカル（オフライン）バージョンでは、2番目のアプローチ（アスタリスク付き）を使用する必要があります。

注

Subjectには括弧がありません。それは この会話 で説明されています（同じ問題がありました、笑）

plnkrは失敗していません です。

役に立てば幸いです。私が何かを逃した場合は教えてください;）

9
Eric Martinez

Angle2 alpha52ではrxjs 5alpha.14を使用します

<script>
System.config({
  map: { rxjs: 'node_modules/rxjs' },
  packages: {
    rxjs: { defaultExtension: 'js' },
    'app': {defaultExtension: 'js'}
  }
});
System.import('app/app');
</script>

ただし、この例のように各演算子を個別にインポートする必要があります

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

require('rxjs/add/operator/map');
require('rxjs/add/operator/scan');
require('rxjs/add/operator/mergemap');  //for flatmap
require('rxjs/add/operator/share');
require('rxjs/add/operator/combinelatest-static'); //for combinelatest
8
Murhaf Sousli

Angular 4リリースの後にこの回答を投稿します。AOTが300kbでも、prodビルドがAngular

それが役に立てば幸い。

import { Injectable } from '@angular/core';
import {Http} from "@angular/http";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';// load this in main.ts

import {AllUserData} from "../../../shared/to/all-user-data";

@Injectable()
export class ThreadsService {

  constructor(private _http: Http) { }

  loadAllUserData(): Observable<AllUserData> {
    return this._http.get('/api/threads')
      .map(res => res.json());
  }

}
2
STEEL