Ng-Bootstrap with Angular CLI

December 1, 2016    JavaScript Development Angular

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”.

Watch the Story for Good News
I gladly accept BTC Lightning Network tips at [email protected]

Please consider using Brave and adding me to your BAT payment ledger. Then you won't have to see ads! (when I get to $100 in Google Ads for a payout, I pledge to turn off ads)

Use Brave

Also check out my Resources Page for referrals that would help me.

Swan logo
Use Swan Bitcoin to onramp with low fees and automatic daily cost averaging and get $10 in BTC when you sign up.