web-dev-qa-db-ja.com

npmパッケージをangular2コンポーネントにインポートする方法は？

私はng2のロープを学ぼうとしていますが、依存性注入システムが私を殺しています。

Ngクイックスタートを使用しています： https://github.com/angular/quickstart/blob/master/README.md

このパッケージをアプリにインポートしようとしています： https://www.npmjs.com/package/arpad 。 npm updateを介してパッケージをインストールしましたが、package.jsonの依存関係は次のようになります。

"dependencies": {
  "angular2": "2.0.0-beta.9",
  "systemjs": "0.19.24",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.35.0",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.5.15",
  "arpad":"^0.1.2" <----- the package i'm trying to import
}

パッケージがコードをエクスポートする方法は次のとおりです。

module.exports = ELO;

次のようなモジュールをインポートするコンポーネントがあります。

import {ELO} from 'node_modules/arpad/index.js';

これは、systemJSがアプリケーションのindex.htmlでどのように構成されているかです。

  <script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map:{'arpad':'node_modules/arpad'} <---- here 
  });
  System.import('node_modules/arpad/index.js'); <--- and here for good measure
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

今、私は暗闇の中で撮影しているように見えます、そしてそれはまさにアプリケーションコンソールのエラーメッセージが私にしたことです。次のようなコンポーネントでモジュールを使用しようとすると、次のようになります。

public elo = ELO;
constructor(){
    this.score = this.elo.expectedScore(200, 1000);
    ---- there is more to the component but this is the part where it breaks
}

次のメッセージが表示されます。

"ORIGINAL EXCEPTION: TypeError: this.elo is undefined"

したがって、より広い範囲での質問は次のとおりです。

Ng2クイックスタートのモジュールローダーとしてsystemJS（またはWebpack、またはBrowserify）を使用して、コンポーネントまたはサービスで機能する特定のnpmパッケージ（まだangularモジュールではない）を取得するにはどうすればよいですか？

angularwebpackbrowserifysystemjs
10
Lucas Moreira

ここにいくつかコメントがあります：

  • モジュールに対して次のようにSystemJSを構成する必要があります。

    _System.config({
  map:{'arpad':'node_modules/arpad/index.js'}
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
_

  • アプリケーションをインポートする（_index.js_モジュールをインポートする）前に、_app/main_ファイル（System.import('node_modules/arpad/index.js');を参照）をインポートする必要はありません。

  • eloオブジェクトを次のようにインポートする必要があります。

    _import * as Elo from 'arpad';
_

  • 次に、モジュールを次のように使用できるようになります。

    _constructor() {
  this.elo = new Elo();
  this.score = this.elo.expectedScore(200, 1000);
}
_

これを説明するプランカーは次のとおりです： https://plnkr.co/edit/K6bx97igIHpcPZqjQkkb?p=preview 。

5
Thierry Templier