6

Angular RC4 の最近のバージョンでは、Rxjs はnode_modulesornpmcdn.comディレクトリで利用できます。

プランカーは成功したが使用していない.umd.js

http://plnkr.co/edit/B33LOW?f=systemjs.config.js&p=preview

これは、個々のファイルをダウンロードする [ネットワーク] タブのスクリーンショットです。 ここに画像の説明を入力

もちろん、このセットアップでは、ファイルを個別に読み取るのではなく、個別に読み取るため、多くの個別の RxJS ファイルがダウンロードされます。.umd.js

ただし、他の AngularJS ファイルと同様に、単一の umd.js ファイルを使用しようとすると、次のエラーが発生します。

GET https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Subject 404 ()
GET https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Observable 404 ()
GET https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/observable/PromiseObservable 404 ()
...

ここに画像の説明を入力

を使用しようとして失敗した plunker .umd.js、およびsystem.config.js

http://plnkr.co/edit/rVUNyz?p=preview&f=systemjs.config.js

systemjs.config.js

  var  map = {
    'app':                        'app',

    '@angular':                   'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
    '@angular/router':            'https://npmcdn.com/@angular/router' + routerVer,
    '@angular/forms':             'https://npmcdn.com/@angular/forms' + formsVer,
    '@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer,
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6/bundles',
    'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
 };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { main: 'Rx.umd.js', defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };

「rxjs」は「package」セクションをまったく使用していないようです。rxjsパッケージ内セクション の使用に違いはありません。

このプランカーを機能させるためだけに、マップセクションを次のように変更する必要がありますbundles

  'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',

私の質問は、「Angular2 アプリケーションで Rx.umd.js を使用する方法はありますか?」です。

4

1 に答える 1

0

Rx.umd.js ファイルを調べたところ、このパッケージ全体で相対パス インポートが使用されているようです。これは、(マップ内の) rxjs パッケージのベースに /bundle サフィックスがある場合、ファイルを見つけることができないことを意味します。

使用するのは実際の rxjs パッケージであり、その「/bundles」ディレクトリではないため、これは理にかなっています。

したがって、あなたがしなければならないことは次のとおりです。

  1. systemjs.config.js の map セクションで変更

    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6/bundles',

    に

    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',

  2. パッケージセクションで、変更

    'rxjs':                       { main: 'Rx.umd.js', defaultExtension: 'js' },

    に

    'rxjs':                       { main: 'bundles/Rx.umd.js', defaultExtension: 'js' },

または簡単に言えば、マッピングはパッケージのルートを指す必要があるため、/bundles はマッピングではなくパッケージ定義の一部である必要があります。

これは、必要な小さな変更を加えた更新された (動作する!) plunker です。

--- 編集 (@allenhwkim コメントに続く) ---

さらに調べてみました。systemjs.config.js は、package (マップではなく) セクション内の bundles/xxx に続くことに注意してください。たとえば、59 行目を参照してください。

angular には rxjs への独自の参照があり、パッケージを適切に定義しているため、パッケージ定義が無視されているように見えると思います。

パッケージが適切で使用されていることを示すために、rxjs1 という名前のダミー パッケージを (plnkr に) 追加し、それを inedex.html ファイルにインポートしようとしました。plnkr を実行して、インポートされていることを確認します。パッケージ定義を存在しないもの (Rxx.umd.js など) に変更してみると、エラーが発生します。使用すると、パッケージ定義が関連しているようです

System.import('package-name');

そしてそうではない

import { someClass } from 'package-name';

plnkr を使用する場合、パッケージ定義への変更が常に plnkr によって追跡されるとは限らないため、ページを更新する必要があることに注意してください。

于 2016-09-02T08:01:16.183 に答える