Pavan Pavan - 29 days ago 44
AngularJS Question

Still getting "Uncaught Error: Bootstrap dropdown require Popper.js" even after including popper.js

New to Angular and Bootstrap and I am trying little hands on by creating helloworld app. I have added required libraries but I am stuck at this error


Uncaught Error: Bootstrap dropdown require Popper.js


I have added the popper.js script, after the jquery and before bootstrap js. but still browser throws the error.

Please help.

code looks like this:

<!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>

Answer Source

This worked for me :

  1. use popper.js which are in the folder named "umd" in the download you find here https://popper.js.org
  2. do not save the files in the same folder as your bootstrap.js but create a separate folder named "umd"
  3. declare popper.js before bootstrap.js

So, in your case, change

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

to

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