How can I add bootstrap to Angular2 via system.js

Question

I\'m trying to add bootstrap module to my ng2 application with by https://github.com/ng-bootstrap/ng-bootstrap. But all time getting this error:

It\'s my in

Answer 1

Your systemjs file should looks like this:

var ngBootstrapMap = {
    '@ng-bootstrap/ng-bootstrap': '../lib/@ng-bootstrap/ng-bootstrap' //change the path according to your project structure
}

var ngBootstrapPackages = {
    '@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
};

var ngBootstrapPackageNames = [
    'accordion',
    'alert',
    'bundles',
    'buttons',
    'carousel',
    'collapse',
    'dropdown',
    'esm',
    'modal',
    'pagination',
    'popover',
    'progressbar',
    'rating',
    'tabset',
    'timepicker',
    'tooltip',
    'typeahead',
    'util'
];

function ngBootstrapPackIndex(pkgName) {
    ngBootstrapPackages['@ng-bootstrap/ng-bootstrap/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}

ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);

var ngBootstrapConfig = {
    map: ngBootstrapMap,
    packages: ngBootstrapPackages
};

System.config(ngBootstrapConfig);

Basically, it looks for index.js file in @ng-bootstrap/ng-bootstrap folder, and after for each component it looks index.js file in @ng-bootstrap/ng-bootstrap/{componentName}

I hope it helps you