使用SystemJS向Angular2 starter添加ng2-bootstrap

Question

我正在尝试将ng2-bootstrap modal功能添加到使用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-bootstrap的映射。像这样添加-

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

在packages部分，像这样使用-

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

现在从packages变量中删除ng2-bootstrap。

如果你仍然有任何错误，请在评论中告诉我。