Angular 2.2 和 ng-bootstrap 无法读取未定义的属性 'Observable'

Question

我已经在 Github 上报告了这个问题，但在这里提问也无妨

错误描述：

我在 ng-bootstrap 中添加并开始出现此错误。

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 到重现问题的最低限度工作的插件：

请参阅my GitHub branch。

这次提交没有这个错误4a049710ba900f5aef8d11141491607e45e49cc2。此提交 fcf8260c8b560f665fc4a34b49dd47f1700c3945 '引入 bootstrap - 无法获取 js include without observable of undefined error' 引入了错误。

Angular、ng-bootstrap 和 Bootstrap 的版本：

Angular 2.2 - CLI

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

Answer 1

我刚刚克隆了你的 repo，你需要对不同的文件进行 3 处更改，我将逐一解释。

package.json

您忘记添加 bootstrap 依赖项，当我克隆您的 repo 时由于缺少包而出现错误，只需执行以下操作：

npm i bootstrap@next --save

或将 "bootstrap": "^4.0.0-alpha.5" 添加到您的依赖项列表中。

src/app/app.component.html

您的主要组件上没有路由器插座，否则您的路由将永远无法工作，请将您的 app.component.html 更改为：

<h1>Energy with Angular 2.0</h1>

<router-outlet></router-outlet>

您的 EnergyComponent 将被 angular 注入 <router-outlet>。

angular-cli.json

最后但同样重要的是你的主要问题，Observable 错误是由于你在 scripts 上包含 ng-bootstrap，只是删除该行，它应该看起来像这样：

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [],

为什么？因为当您将 ng-boostrap 导入 app.module.ts 时，您已经包含了它，所以您只在它们是外部依赖项时才添加脚本，但您不会直接在您的代码中使用它们。例如，如果您使用的是纯 boostrap 方式，css + javascript/jquery 您将在脚本中添加 bootstrap.js数组

Angular 2.2 和 ng-bootstrap 无法读取未定义的 属性 'Observable'

Angular 2.2 and ng-bootstrap Cannot read property 'Observable' of undefined

angular-cli

ng-bootstrap

angular

package.json

src/app/app.component.html

angular-cli.json

Angular 2.2 和 ng-bootstrap 无法读取未定义的属性 'Observable'