Navbar drop down list does not work with Angular-bootstrap

user_14087249 0
Viewed 166

I created an angular 10 project and add bootstrap, jquery, and popper js to it. Afterward, I included a default navbar from bootstrap documentation, for the purpose of checking those included dependencies. Bootstrap and Jquery are working properly, yet Popper JS, which is responsible for showing the dropdown list in the navbar does not work and shows no output.
The navbar

Packages in Angular.json

"styles": [
         "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.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"
        ]
navbar angular10 twitter-bootstrap popper.js
1 Answers

I ran into the same issue. If you are using Bootstrap 5, it will not work with popper.js. Popper.js is deprecated. You will need to install:

npm install @popperjs/core

Then change your angular.json scripts reference and replace popper.min.js with:

"./node_modules/@popperjs/core/dist/umd/popper.min.js"

user_83587930
Related