Menu
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>
305
You must include popper. min. js before bootstrap.
Popovers rely on the 3rd party library Popper for positioning.
This worked for me :
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>
Had the same problem and solved it. Hope it helps!
If you are using Bootstrap.js in your project then it requires jquery and popper.js to run ahead of bootstrap. below steps might solve the issue:
cd to the Project's folder or cd to project's bootstrap folder. Execute:
npm install popper.js --save
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.
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
