Come importare un pacchetto npm in un componente angular2?

Question

Sto cercando di imparare le corde di ng2 e il sistema di iniezione di depiction mi sta uccidendo.

Sto utilizzando il quickstart ng da: https://github.com/angular/quickstart/blob/master/README.md

Sto cercando di importare questo pacchetto in app: https://www.npmjs.com/package/arpad. Ho installato il pacchetto di aggiornamento tramite NPM, le mie dipendenze package.json simile a questa:

"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 
} 

Questo è come il pacchetto esporta il suo codice:

module.exports = ELO; 

Ho un componente importando il modulo in questo modo:

import {ELO} from 'node_modules/arpad/index.js'; 

Questo è il modo systemJS è configurato in index.html dell'applicazione:

<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> 

Ora, sembra proprio che io stia girando al buio, ed è esattamente quello che mi hanno fatto i messaggi di errore nella console delle applicazioni. Quando cerco di utilizzare il modulo nel componente in questo modo:

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 
} 

ottengo il seguente messaggio:

"ORIGINAL EXCEPTION: TypeError: this.elo is undefined" 

Quindi la domanda in un ambito più vasto è:

Come posso ottenere un determinato pacchetto npm (che non è già un modulo angolare) per lavorare in un componente o servizio usando systemJS (o Webpack o Browserify) come modulo loader nel quickstart ng2?

Answer 1

ho alcuni commenti qui:

• È necessario configurare SystemJS in questo modo per il modulo:

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

• Non è necessario importare il index.js file (vedere System.import('node_modules/arpad/index.js');) prima importazione dell'applicazione (importazione del modulo app/main).

• È necessario importare il elo oggetto in questo modo:

  import * as Elo from 'arpad'; 
  

• allora si dovrebbe essere in grado di utilizzare il modulo in questo modo:

  constructor() { 
      this.elo = new Elo(); 
      this.score = this.elo.expectedScore(200, 1000); 
  } 
  

Ecco un plunkr che descrive questo: https://plnkr.co/edit/K6bx97igIHpcPZqjQkkb?p=preview.