Reputation: 7294
I'm an working in Angular 8 and added Bootstrap via npm using below commands
npm install jquery
npm install popper.js
npm install ngx-bootstrap [email protected]
(have tried npm install bootstrap as well)
and updated my angular.json as below with styles and scripts.
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
I have added a code of drop-down in html file but its not working while checking in console I am getting popper.min.js error.
And the html script is :
<div class="col-6 text-left">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
Project A
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Project A</a>
<a class="dropdown-item" href="#">Project B</a>
<a class="dropdown-item" href="#">Project C</a>
<a class="dropdown-item" href="#">Project E</a>
</div>
</div>
@Tony Ngo please find screenshot ( after changing order of popper and bootstrap)
Upvotes: 3
Views: 1448
Reputation: 20102
Your import order should be like this
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
Upvotes: 1