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

Question

我正在努力学习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"

所以更广泛的问题是:

如何使用systemJS(或Webpack,或Browserify)作为ng2快速入门中的模块加载器,在组件或服务中使用给定的npm包(不是角度模块)？

Answer 1

我在这里有一些评论:

• 您应该以这种方式为您的模块配置SystemJS:

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

• 在导入应用程序(导入模块)之前,无需导入index.js文件(请参阅System.import('node_modules/arpad/index.js');参考资料app/main).

• 您需要以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 .