如何在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包？

回答

相關問題