How to use ng2-bootstrap with Angular 2?

Question

How to use Bootstrap (or any other) component library? Christopher · 6 minutes ago

Can anyone help with sample code on how to include bootstrap components

I am trying to use the bootstrap alert. I installed the npm package and added the package as :

alert-component.ts:

import {Component} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import { AlertComponent } from 'ng2-bootstrap/ng2-bootstrap';
@Component({
  selector: 'alert-demo',
  template: `
    <alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
      {{ alert?.msg }}
    </alert>
    <alert dismissOnTimeout="3000">This alert will dismiss in 3s</alert>
    <button type="button" class='btn btn-primary' (click)="addAlert()">Add Alert</button>
  `,
  directives: [AlertComponent, CORE_DIRECTIVES]
})
export class AlertDemoComponent {
  public alerts:Array<Object> = [
    {
      type: 'danger',
      msg: 'Oh snap! Change a few things up and try submitting again.'
    },
    {
      type: 'success',
      msg: 'Well done! You successfully read this important alert message.',
      closable: true
    }
  ];
  public closeAlert(i:number):void {
    this.alerts.splice(i, 1);
  }
  public addAlert():void {
    this.alerts.push({msg: 'Another alert!', type: 'warning', closable: true});
  }
}

app.component.ts

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES } from "@angular/router";
import { MessagesComponent } from "./messages/messages.component";
import { AuthenticationComponent } from "./auth/authentication.component";
import {NavBarComponent} from "./navbar.component"
import {AlertDemoComponent} from "./alert.component"
@Component({
    selector: 'my-app',
    template: `
            <navbar></navbar>
            <alert-demo></alert-demo>
    `,
    directives: [ROUTER_DIRECTIVES, NavBarComponent,AlertDemoComponent]
})
@Routes([
    {path: '/', component: MessagesComponent},
    {path: '/auth', component: AuthenticationComponent}
])
export class AppComponent {}

systemjs.config.js

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

    // 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' },
        "node_modules/ng2-bootstrap": {defaultExtension: 'js'}
    };

    var paths= {
    "ng2-bootstrap/ng2-bootstrap":   "node_modules/ng2-bootstrap/ng2-bootstrap"
  }


    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'
    ];

    // 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,
        paths: paths
    };

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

I am getting error

"NetworkError: 404 Not Found - http://localhost:3000/ng2-bootstrap/ng2-bootstrap"
ng2-bootstrap
Error: patchProperty/desc.set/wrapFn@http://localhost:3000/js/vendor/zone.js/dist/zone.js:769:27
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/js/vendor/zone.js/dist/zone.js:356:24
Zone</Zone</Zone.prototype.runTask@http://localhost:3000/js/vendor/zone.js/dist/zone.js:256:29
ZoneTask/this.invoke@http://localhost:3000/js/vendor/zone.js/dist/zone.js:423:29
Error loading http://localhost:3000/ng2-bootstrap/ng2-bootstrap as "ng2-bootstrap/ng2-bootstrap" from http://localhost:3000/js/app/alert.component.js

Solution

Assuming that you have ng2-bootstrap in your package.json dependencies:

"ng2-bootstrap": "^1.0.16",

And that it is installed in your project's node_modules, you need to make sure to include ng2-bootstrap library in your index.html:

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

Once you have this, you should remove it from your packageNames in 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'
    ];

In addition, ng2-bootstrap has a dependency on moment.js which means you need to also include it in your dependencies:

"moment": "^2.13.0"

And you need to update your systemjs.config.js to contain mapping:

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

Once you have all of these in place, you should be able to use any of the ng2-bootstrap components with no issues.