Angular 2.2和ng-bootstrap无法读取未定义的属性“可观察”

Question

I've reported this issue on Github , but asking it here won't hurt either

Bug description:

I added in ng-bootstrap and started getting this error.

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

Link to minimally-working plunker that reproduces the issue:

Please see my GitHub branch .

This commit does not have this error 4a049710ba900f5aef8d11141491607e45e49cc2. This commit fcf8260c8b560f665fc4a34b49dd47f1700c3945 'bring in bootstrap - couldn't get js include without observable of undefined error' introduced the error.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular 2.2 - CLI

ng-bootstrap: "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.14",

Answer 1

I just cloned your repo, you need to do 3 changes on different files, I'm going to explain each one.

package.json

You forgot to add the bootstrap dependency, when I cloned your repo I got errors due to the missing package, just do:

npm i bootstrap@next --save

Or add "bootstrap": "^4.0.0-alpha.5" into your dependencies list.

src/app/app.component.html

You don't have a router-outlet on your main component, without that your routes will never work, change your app.component.html into this:

<h1>Energy with Angular 2.0</h1>

<router-outlet></router-outlet>

Your EnergyComponent will be injected inside the <router-outlet> by angular.

angular-cli.json

Last but not least your main problem, the Observable error is due to the fact you are including ng-bootstrap on your scripts , just remove that line, it should look something like this:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],
"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