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

I had the same issue. Basically you need to tell your systemjs.config where to find all the single components of ng-bootstrap.

Based on the Answer of ulubeyn, I added the following to the basic systemjs.config:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  // map tells the System loader where to look for things
  var map = {
    'app': 'app', // 'dist',
    '@angular': 'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs',
    '@ng-bootstrap': 'node_modules/@ng-bootstrap',
    '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': {main: 'main.js', defaultExtension: 'js'},
    'rxjs': {defaultExtension: 'js'},
    'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'},
    '@ng-bootstrap/ng-bootstrap': {main: 'index.js', defaultExtension: 'js'}

  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  var ngBootstrapPackageNames = [
    'accordion',
    'alert',
    'bundles',
    'buttons',
    'carousel',
    'collapse',
    'dropdown',
    'esm',
    'modal',
    'pagination',
    'popover',
    'progressbar',
    'rating',
    'tabset',
    'timepicker',
    'tooltip',
    'typeahead',
    'util'
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
  }

  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/' + pkgName] = {main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'};
  }

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

  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);

  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

In Detail:

1. Add '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap' to your map. This will provide a path to your ng-bootstrap.

2. Add '@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' } to your packages.

3. Add a new array providing all ng-bootstrap component folders (see ngBootstrapPackageNames in the above example).

4. Now bring everything together by adding those informations to your map, and associating it with the corresponding index files:

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

I hope this helps, as it works with those changes for me.

Update for ng-bootstrap alpha 5

If you are using alpha 5, change @ng-bootstrap/ng-bootstrap mapping in packages variable to this;

var packages = {
     ...,
     '@ng-bootstrap/ng-bootstrap': {main: '/bundles/ng-bootstrap.js', defaultExtension: 'js'},
     ...
}

Answer 2

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