即使在包含 popper.js 之后仍然出现“未捕获的错误：引导下拉菜单需要 Popper.js”答案

【问题标题】：Still getting "Uncaught Error: Bootstrap dropdown require Popper.js" even after including popper.js即使在包含 popper.js 之后仍然出现“未捕获的错误：引导下拉菜单需要 Popper.js”
【发布时间】：2018-01-26 08:07:55
【问题描述】：

Angular 和 Bootstrap 的新手，我正在尝试创建 helloworld 应用程序。我已经添加了所需的库，但我遇到了这个错误

未捕获的错误：引导下拉菜单需要 Popper.js

我在 jquery 之后和 bootstrap js 之前添加了 popper.js 脚本。但浏览器仍然会抛出错误。

请帮忙。

代码如下：

<!DOCTYPE html>
<html ng-app="helloWorld" lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Index</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

</head>

<body ng-controller="mainCtrl">{{message}}

<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
</body>

</html>

【问题讨论】：

您使用的是什么版本的 popper.js？在这种情况下你需要 UMD 一个
压缩了一个popper.min.js
我下载的版本是v1.12.2。哪个是 UMD？
您是否尝试过更改 bootstrap.js 和 poper.js 脚本的位置？
我在 bootstrap 之后有 popper.js，但它不起作用，无论如何我知道它必须在 bootstrap 之后

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

这对我有用：

使用 popper.js，它位于您在此处找到的下载中名为“umd”的文件夹中 https://popper.js.org
不要将文件保存在与 bootstrap.js 相同的文件夹中，而是创建一个名为“umd”的单独文件夹
在 bootstrap.js 之前声明 popper.js

所以，在你的情况下，改变

<script src="js/popper.min.js" type="text/javascript"></script>

到

<script src="js/umd/popper.min.js" type="text/javascript"></script>

【讨论】：

不需要popper-utils
这对我有用。我已将 BundleConfigu 中的路线更改为使用“umd”

【解决方案2】：

Indra4ev3r 的答案在 VS2015 Update 3 上为我工作，用于 MVC5 项目。例如，在引导之前切换 popper。

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js"));

【讨论】：

【解决方案3】：

遇到了同样的问题并解决了。希望对您有所帮助！

如果您在项目中使用 Bootstrap.js，那么它需要 jquery 和 popper.js 才能在 bootstrap 之前运行。以下步骤可能会解决问题：

cd 到项目的文件夹或 cd 到项目的引导文件夹。执行：
```
npm install popper.js --save
```
转到http://getbootstrap.com/docs/4.0/getting-started/download/ 复制 Bootstrap CDN 部分下的脚本和链接内容 - 如果您使用的是我们编译的 JavaScript，请不要忘记在其之前包含 jQuery 和 Popper.js 的 CDN 版本。

您的 index.html 文件可能必须如下所示：（基于 jquery 和 popper.js 的版本）您基本上是按以下顺序查找 3 个 script src = "" 标签 jquery > popper.js > bootstrap.js 注意：编辑器不允许我添加脚本标签。请添加它们。

src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous">

src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous">

【讨论】：

正如你所说，序列是有意义的

【解决方案4】：

我在 VisualStudio 2017 中也遇到了这个错误。

当我在这一行中删除“min”时

    <script src="Scripts/popper.min.js"></script>

作为

    <script src="Scripts/popper.js"></script>

DropDownMenu 功能起作用了！

【讨论】：