logo标签列表

即使包含了popper.js，仍然出现“Uncaught Error: Bootstrap dropdown require Popper.js”错误。

javascriptjqueryangularjstwitter-bootstrap
13

我是新手，正在学习Angular和Bootstrap，通过创建“helloworld”应用程序来尝试一些操作。我已经添加了必需的库，但卡在这个错误上：

Uncaught Error: Bootstrap下拉菜单需要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>
2
你正在使用哪个版本的 popper.js？在这种情况下，你需要使用 UMD 版本。 - Fez Vrasta
压缩后的一个 popper.min.js。 - Pavan
我下载的版本是v1.12.2。这是UMD版本吗？ - Pavan
您尝试过更改bootstrap.js和poper.js脚本的位置吗？ - Konrad Uciechowski
我在使用Bootstrap后加入了popper.js，但它没有起作用，而且我得知它必须放在Bootstrap之后。 - Pavan
谢谢Fez，使用UMD方式可以正常工作。我从CDN的URL下载了它。 - Pavan
4个回答
28

这对我起作用：

  1. 使用在此链接中下载的“umd”文件夹中找到的popper.js：https://popper.js.org
  2. 不要将文件保存在与bootstrap.js相同的文件夹中，而是创建一个名为“umd”的单独文件夹。
  3. 在引入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>
1
popper-utils 不需要。 - Fez Vrasta
这对我有用。我已经在我的BundleConfig中更改了路由，使用“umd”。 - EduardoUstarez
3

Indra4ev3r的回答对我在一个MVC5项目中使用的VS2015 Update 3有效。例如，在引导之前切换popper。

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

我曾经遇到过同样的问题并解决了它。希望对你有所帮助！

如果你在项目中使用Bootstrap.js，那么它需要在bootstrap之前运行jquery和popper.js。

以下步骤可能会解决这个问题：

  1. cd to the Project's folder or cd to project's bootstrap folder. Execute: 

    npm install popper.js --save

  2. Go to http://getbootstrap.com/docs/4.0/getting-started/download/ Copy the script and link contents under Bootstrap CDN section which states - If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.

  3. Your index.html file might have to look like this: (Based on the versions of the jquery and popper.js) You are basically looking for 3 script src = "" tags in the following order jquery > popper.js > bootstrap.js note: editor doesnt allow me to add script tags. pls add them.

    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">
1
正如你所提到的，顺序是有意义的。 - Asqan
1
我也在VisualStudio 2017中遇到了这个错误。 当我删除此行中的"min"时。 
    <script src="Scripts/popper.min.js"></script>

as

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

而且DropDownMenu函数起作用了！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，