Adding ng2-bootstrap to Angular2 starter using SystemJS

Question

I'm trying to add ng2-bootstrap modal functionality to a component of a project that uses angular2-starter

Here's my 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);

I'm importing ModalDirective in to my component this way

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

package.json

 "ng2-bootstrap": "^1.1.1",

This is the error I get:

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

Community · Accepted Answer · 2017-05-23 12:32:29Z

0

In systemjs.config.js, you are missing map of ng2-bootstrap. Add like this-

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

and in packages section, use like this-

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

For more information, look at this link

See if this helps.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Sep 4, 2016 at 5:39

Sanket

20.2k10 gold badges74 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6123723 Over a year ago

After doing that, I get this error localhost/:55 Error: (SystemJS) Unexpected token < SyntaxError: Unexpected token < at Object.eval (localhost:3000/node_modules/ng2-bootstrap/components/datepicker/…)

Dhyey · Accepted Answer · 2017-06-02 05:29:52Z

Change you system.config.js map variable as follows:

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

And also change your import statement like this:

import { ModalDirective } from 'ng2-bootstrap';

Now remove ng2-bootstrap from packages variable.

Let me know in comments if you still have any errors.

Collectives™ on Stack Overflow

Adding ng2-bootstrap to Angular2 starter using SystemJS

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related