Добавление NG2-загрузчик для Angular2 стартера с помощью SystemJS

Question

Я пытаюсь добавить ng2-bootstrapmodal функциональность компонента проекта, который использует angular2-starter

Вот мои systemjs.conf.js

/* 
* This config is only used during development and build phase only 
* It will not be available on production 
* 
*/ 

(function (global) { 
    // ENV 
    global.ENV = global.ENV || 'development'; 

    // map tells the System loader where to look for things 
    var map = { 
     'app': 'src/tmp/app', 
     'test': 'src/tmp/test' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app': { 
      defaultExtension: 'js' 
     }, 
     'test': { 
      defaultExtension: 'js' 
     }, 
     'rxjs': { 
      defaultExtension: 'js' 
     }, 
     'ng2-bootstrap': {main: 'ng2-bootstrap', defaultExtension: 'js' } 
    }; 

    // List npm packages here 
    var npmPackages = [ 
     '@angular', 
     'rxjs', 
     'lodash' 
    ]; 

    // Add package entries for packages that expose barrels using index.js 
    var packageNames = [ 
     // App barrels 
     'app/shared', 

     // 3rd party barrels 
     'lodash', 
     'vendor/ng2-bootstrap' 
    ]; 

    // Add package entries for angular packages 
    var ngPackageNames = [ 
     'common', 
     'compiler', 
     'core', 
     'forms', 
     'http', 
     'platform-browser', 
     'platform-browser-dynamic', 
     'router' 
    ]; 

    npmPackages.forEach(function (pkgName) { 
     map[pkgName] = 'node_modules/' + pkgName; 
    }); 

    packageNames.forEach(function (pkgName) { 
     packages[pkgName] = {main: 'index.js', defaultExtension: 'js'}; 
    }); 

    ngPackageNames.forEach(function (pkgName) { 
     map['@angular/' + pkgName] = 'node_modules/@angular/' + pkgName + 
      '/bundles/' + pkgName + '.umd.js'; 
     map['@angular/' + pkgName + '/testing'] = 'node_modules/@angular/' + pkgName + 
      '/bundles/' + pkgName + '-testing.umd.js'; 
    }); 

    var config = { 
     map: map, 
     packages: packages 
    }; 

    // filterSystemConfig - index.html's chance to modify config before we register it. 
    if (global.filterSystemConfig) { 
     global.filterSystemConfig(config); 
    } 

    System.config(config); 

})(this); 

Я м импортирования ModalDirective в свой компонент таким образом

import {ModalDirective} from 'ng2-bootstrap/ng2-bootstrap'; 

package.json

"ng2-bootstrap": "^1.1.1", 

Это ошибка, я получаю:

(index):55 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-bootstrap/ng2-bootstrap.js(…) 

Answer 1

В systemjs.config.js, вы упускаете карта NG2-загрузчике. Добавить как this-

'ng2-bootstrap':    'node_modules/ng2-bootstrap', 

и в пакетах секции, использовать как this-

'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension:'js'} 

Для получения дополнительной информации, смотрите на this link

Смотрите, если это помогает.

Answer 2

Изменить вы system.config.js карту переменных следующим образом:

// map tells the System loader where to look for things 
var map = { 
    'app': 'src/tmp/app', 
    'test': 'src/tmp/test', 
    'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js' 
}; 

А также изменить оператор импорта, как это:

import { ModalDirective } from 'ng2-bootstrap'; 

Теперь удалите ng2-bootstrap из packages переменных.

Сообщите мне, если у вас все еще есть ошибки.