如何在angular2组件中导入npm包？

我正在努力学习ng2的诀窍，依赖性注射系统正在折磨我

我正在从以下位置使用ng快速启动：

我正在尝试将此包导入应用程序：。我通过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
}

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

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
}

我有一个导入模块的组件，如下所示：

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

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

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
}

以下是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>

我得到以下信息：

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

因此，更广泛范围内的问题是：

---

如何使用systemJS（或Webpack，或Browserify）作为ng2 quickstart中的模块加载器，让给定的npm包（还不是angular模块）在组件或服务中工作？

我在这里有一些评论：

• 您应该以这种方式为您的模块配置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);
  }
  

• 然后，您应该能够通过以下方式使用您的模块：

  import * as Elo from 'arpad';
  

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

---

下面是一个描述这一点的plunkr:.

给了我一个“原始异常：ReferenceError:Elo未定义”，但这可能就是包的组织方式。输入Thx！使用

从“arpad”导入Elo？我添加了一个plunkr来描述：。就是这样！ng2页面上的文档在模块加载问题上有点模糊。plunkr将作为未来的参考，thx的额外努力。是的，同意！这就是问题所在。有几种方法可以实现，与Angular2没有直接关系；-）