title: Angular2 + ng-bootstrap Example
body: <p>I started to learn Angular2 and I want to use ng-bootstrap in my project. However, I could not make a working project. It fails on importing ng-bootstrap. Since I am a beginner, I don't know if the problem is because of the code or something other that I made wrong. </p>
  
  <p>Can you provide me a working <strong>and simple</strong> project with ng-bootstrap and Angular2 so I can try to make it work on my computer? </p>
  
  <p>Edit:</p>
  
  <p>app.module.ts: </p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  import { AppComponent }  from './app.component';
  import { NgbdAlertCloseable } from './ngbd-alert-closeable.component';
  
  
  @NgModule({
    imports:      [ NgbModule, BrowserModule ],
    declarations: [ NgbdAlertCloseable, AppComponent ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>systemjs.config.js:</p>
  
  <pre><code>/**
   * 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'
    };
    // 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':       { 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'};
    }
  ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);
    // 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);
    var config = {
      map: map,
      packages: packages
    };
    System.config(config);
  })(this);
  </code></pre>
  
  <p>Error:</p>
  
  <p><a href="https://i.stack.imgur.com/1U7nQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1U7nQ.png" alt="error"></a></p>