如何在angular2組件中導入npm包？

Question

我正在嘗試學習ng2的精髓，而去污劑注入系統正在殺死我。

我正在從以下位置使用ng quickstart： 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';

這是在應用程序的index.html中配置systemJS的方式：

  <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模塊）在組件或服務中工作？

Answer 1

我在這里有一些評論：

• 您應該以這種方式為模塊配置SystemJS：

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

• 在導入應用程序（導入app/main模塊）之前，不需要導入index.js文件（請參閱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。