Bootstrap dropdown not working in angular 8 project

Question

I've installed the following packages:

npm install --save bootstrap@3
npm install --save popper.js angular-popper
npm install jquery --save

And added the styles and scripts in the angular.json file in this order:

        "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"
        ]

Then just followed the official example:

<div class="container headerComponent min-height-header">
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
</div>

The styles seems to display correctly, but the caret is not showing and nothing happens on click.

No error in browser or developer tool.

I have realized however that in the sources tab of the developer tool, only boostrap.min.css is included through node_modules.

The only solution for me right now is adding the links in the header of index.html like this:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 1

The solution to the dropdown menus is to have

data-bs-toggle="dropdown"

instead of

data-toggle="dropdown"

Answer 2

That is because you don't have the aria-labelledby attribute on your dropdown-menu div and id on your dropdown button. I'm writing the correct version below:

<div class="container headerComponent min-height-header">
<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" id="dropdownMenuButton" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>