TypeError: e is undefined in popper.min.js?

Question

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 bootstrap@4.1.1
(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)

Answer 1

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