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

我试图学习ng2的绳索和依赖注入系统正在杀死我。如何在angular2组件中导入npm包？

我使用的是NG快速入门来源： 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';

这是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"

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

我怎样才能得到一个给定的npm包（这不是一个角度模块）在ng2 quickstart中使用systemJS（或Webpack或Browserify）作为模块加载程序在组件或服务中工作？

来源

2016-03-22 Lucas Moreira

我有一些意见在这里：

您应该配置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。

来源

2016-03-22 13:40:38

给我一个“原来的例外：ReferenceError：Elo没有定义”，但这可能就是组织的方式。 Thx为输入！ –

并且从'arpad'导入Elo;'？ –

我添加了一个描述这个的plunkr：https://plnkr.co/edit/K6bx97igIHpcPZqjQkkb?p=preview。 –

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

回答

相关问题