1

我已经在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

链接到重现问题的最低限度工作的 plunker：

请参阅我的 GitHub 分支。

这个提交没有这个错误 4a049710ba900f5aef8d11141491607e45e49cc2。这个提交fcf8260c8b560f665fc4a34b49dd47f1700c3945 '引入引导程序 - 如果没有可观察到的未定义错误就无法包含 js' 引入了错误。

Angular、ng-bootstrap 和 Bootstrap 的版本：

Angular 2.2 - CLI

ng-bootstrap：“@ng-bootstrap/ng-bootstrap”：“^1.0.0-alpha.14”，

4

1 回答 1

2

我刚刚克隆了你的仓库，你需要对不同的文件进行 3 次更改，我将解释每一个。

包.json

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

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将被注入到<router-outlet>by angular 内部。

角-cli.json

最后但并非最不重要的是您的主要问题，Observable 错误是由于您在ng-bootstrap上包含了这一事实scripts，只需删除该行，它应该看起来像这样：

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

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

于 2016-12-01T17:50:41.837 回答