首页 文章

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

提问于
浏览 次
9

我正在努力学习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包（不是角度模块）？

angular webpack browserify systemjs

1 回答

  • 5

    我在这里有一些评论：

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

    回复于

相关问题