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

Question

我正在努力学习 ng2 的诀窍，依赖注入系统让我受不了。

我正在使用 ng quickstart 来自： https://github.com/angular/quickstart/blob/master/README.md

我正在尝试将此包导入应用程序：https://www.npmjs.com/package/arpad。我通过 npm 更新安装了包，我的 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"

所以更广泛范围的问题是：

如何使用 systemJS（或 Webpack，或 Browserify）作为 ng2 快速入门中的模块加载器，让给定的 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);
}

这里有一个 plunkr 对此进行了描述：https://plnkr.co/edit/K6bx97igIHpcPZqjQkkb?p=preview。

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

How to import a npm package in an angular2 component?

browserify

systemjs

webpack

angular