Как использовать ng2-bootstrap с Angular 2?

Предположим, что у вас есть ng2-bootstrap в ваших package.json зависимостях:

"ng2-bootstrap": "^1.0.16",

И чтобы он был установлен в node_modules вашего проекта, вам нужно обязательно включить библиотеку ng2-bootstrap в ваш index.html:

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>

После этого удалите его из списка packageNames в systemjs.config.js:

var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/testing',
        '@angular/upgrade'
    ];

Кроме того, ng2-bootstrap зависит от moment.js, что означает, что вам также необходимо включить его в свои зависимости:

"moment": "^2.13.0"

И вам нужно обновить свой systemjs.config.js, чтобы он содержал сопоставление:

var map = {
        'app': 'app', // 'dist',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular': 'node_modules/@angular',
        moment: 'node_modules/moment/moment.js'
    };

Когда у вас все это будет на месте, вы сможете без проблем использовать любой из компонентов ng2-bootstrap.

systemjs.config

    (function(global) {

        // map tells the System loader where to look for things
        var map = {
            'app':                        'js/app', // 'dist',
            'rxjs':                       'js/vendor/rxjs',
            '@angular':                   'js/vendor/@angular',
            'moment':                     'js/vendor/moment/moment.js',
            'ng2-bootstrap':              'js/vendor/ng2-bootstrap'
        };

        // packages tells the System loader how to load when no filename and/or no extension
        var packages = {
            'app':                        { main: 'boot.js',  defaultExtension: 'js' },
            'rxjs':                       { defaultExtension: 'js' },
            'ng2-bootstrap':              { defaultExtension: 'js' }
        };

        var packageNames = [
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router',
            '@angular/testing',
            '@angular/upgrade'
        ];

        // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
        packageNames.forEach(function(pkgName) {
            packages[pkgName] = { main: 'index.js', defaultExtension: '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);

глоток

gulp.task('vendor', function() {

    // Angular 2 Framework
    gulp.src('node_modules/@angular/**')
        .pipe(gulp.dest(vendor + '/@angular'));

    //ES6 Shim
    gulp.src('node_modules/es6-shim/**')
        .pipe(gulp.dest(vendor + '/es6-shim/'));

    //reflect metadata
    gulp.src('node_modules/reflect-metadata/**')
        .pipe(gulp.dest(vendor + '/reflect-metadata/'));

    //rxjs
    gulp.src('node_modules/rxjs/**')
        .pipe(gulp.dest(vendor + '/rxjs/'));

    //systemjs
    gulp.src('node_modules/systemjs/**')
        .pipe(gulp.dest(vendor + '/systemjs/'));

    //bootstrap
    gulp.src('node_modules/ng2-bootstrap/**')
        .pipe(gulp.dest(vendor + '/ng2-bootstrap'));

   //moment.js for bootstrap datepicker
    gulp.src('node_modules/moment/**')
            .pipe(gulp.dest(vendor + '/moment'));

    //zonejs
    return gulp.src('node_modules/zone.js/**')
        .pipe(gulp.dest(vendor + '/zone.js/'));
});

На всякий случай, если кто-то еще испытывает дополнительные проблемы и получает эту ошибку:

Uncaught TypeError: System.registerDynamic is not a function. 

Решение. Переместите тег сценария ng2-bootstrap после тега сценария systemjs в файле index.html. Это не должно иметь значения, но на данный момент имеет значение.

Итак, если вы используете Angular2-quickstart, ваш index.html должен выглядеть так.

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <app>Loading...</app>
  </body>
</html>