Steps to setup Ng-Bootstrap with Angular CLI

I had some difficulties getting ng-bootstrap running with Angular CLI which uses Webpack. There is an open issue to add instructions and a demo for CLI, but I decided to fill the gap on my blog (contact me on Twitter if you’d like to use this in ng-bootstrap and I can make a PR).

Thank you to Fabio Antunes for pointing out my mistakes through my StackOverflow question.

I’m using "@angular/common": "2.2.1", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.14", "bootstrap": "^4.0.0-alpha.5"

The Steps

If you don’t already have Angular CLI setup, run these commands in the command line.

1. npm install -g angular-cli
2. ng new myApp

3. cd myApp

4. npm install --save @ng-bootstrap/ng-bootstrap

5. npm i bootstrap@next --save

6. add '../node_modules/bootstrap/dist/css/bootstrap.css' to the styles[] in the angular-cli.json

My mistake was adding '../node_modules/bootstrap/dist/js/bootstrap.js' to the scripts[] in the angular-cli.json. I was getting a strange error.

VM35625:9 Uncaught TypeError: Cannot read property 'Observable' of undefined(…)webpackUniversalModuleDefinition @ VM35625:9(anonymous function) @ VM35625:10module.exports @ scripts.bundle.js:28369 @ scripts.bundle.js:6__webpack_require__ @ inline.bundle.js:53694 @ scripts.bundle.js:37__webpack_require__ @ inline.bundle.js:53webpackJsonpCallback @ inline.bundle.js:24(anonymous function) @ scripts.bundle.js:1 main.bundle.js:417

Fabio says “Last but not least your main problem, the Observable error is due to the fact you are including ng-bootstrap on your scripts,”, “Why? Because you are already including ng-boostrap when you import it on your app.module.ts you only add scripts when they are an external dependencies, but you don’t use them directly on your code. For example if you were using the pure boostrap way, css + javascript/jquery you would add the bootstrap.js on your scripts array”.