Как импортировать пакет npm в компонент angular2?

Я пытаюсь изучить основы ng2, и система внедрения зависимостей меня убивает.

Я использую быстрый запуск 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 (который еще не является угловым модулем) работать в компоненте или службе, используя systemJS (или Webpack, или Browserify) в качестве загрузчика модулей в кратком руководстве по ng2?


webpack angular browserify systemjs
person Lucas Moreira    schedule 22.03.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

У меня есть некоторые комментарии здесь:

  • Вы должны настроить 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, описывающий это: /а>.

person Thierry Templier    schedule 22.03.2016
comment
это дает мне ИСХОДНОЕ ИСКЛЮЧЕНИЕ: ReferenceError: Elo не определено, но это может быть просто способ организации пакета. Спасибо за вклад! - person Lucas Moreira; 22.03.2016
comment
А с import Elo from 'arpad';? - person Thierry Templier; 22.03.2016
comment
Я добавил plunkr, описывающий это: plnkr.co/edit/K6bx97igIHpcPZqjQkkb?p=preview . - person Thierry Templier; 22.03.2016
comment
Это сделало это! Документы на странице ng2 были немного туманны в вопросе загрузки модулей. Планкр будет полезен для дальнейшего использования, спасибо за дополнительные усилия. - person Lucas Moreira; 22.03.2016
comment
Да согласен! Это проблема. Есть несколько способов сделать это, и это не имеет прямого отношения к Angular2 ;-) - person Thierry Templier; 22.03.2016
comment
Для некоторых модулей я должен использовать импорт * как Elo из arpad. - person intotecho; 08.03.2018