Dropdowns and Collapse Not Working with Angular

[cjhaviland]

Hey all, here is a little information and I could use all the help I can get.

Versions

• Angular 10
• Bootstrapv5-Alpha3
• Popper 1.16.1
• Sass Module System

Files

vendors/_bootstrap.scss:

@forward 'node_modules/bootstrap/scss/bootstrap' with (...)

styles/main.scss:

@use 'vendors/bootstrap'

angular.json:

"styles": [
  "src/styles/base/_font.scss",
  "src/styles/main.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
},
"scripts": [
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
]

Explaination

Everything was working just fine in Alpha1, then one day it stopped working. I am not sure what changed in my code TBH. I ended up upgrading to Alpha3 hoping that would fix something but it didn't. I have tried a single dropdown on the page copied directly from the Bootstrap docs and that doesn't work. I can get it to work using Javascript though.

If you're watching the element in Chrome debugger, when you click on the dropdown I can see aria-expanded and class flash but everything stays false and classes aren't added. The first time you click the <ul> gets attributes added to it: <ul _ngcontent-jno-c62="" aria-labelledby="dropdownMenuButton" class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 47px, 0px); top: 0px; left: 0px; will-change: transform;">.

What I've Tried

I have tried including the JS files in angular.json as seen above. I've tried the bundled min files as well without luck. I've taken those out and tried adding the bundled JS files as a <script> before the end of my body. The only time I can get it to work is if I init the dropdown myself through javascript. This WAS working when I first installed Bootstrap v5 but I can't tell you when it stopped working.

Thanks for any help or tips.

[XhmikosR]

Please make a test repo with the minimun dependencies and code so that we can try.

[cjhaviland]

I had an idea that the JS file was getting added multiple times thanks to Angular. This all started happening when I added the @types/bootstrap. For some reason the entire JS file is getting added to my vendors.js file, but I was also including it in my angular.json file. Once I removed it from angular.json it started working! I still have no idea where Angular is actually grabbing the JS files from though...