Navbar-Toogle Bootstrap 5 not working (with Angular)

Question

my console show me this error , it's about popper js . this is the error , and i think because of that my toggle button is not working

scripts.js:7 Uncaught SyntaxError: Unexpected token 'export'

export default Popper;

and this is my scripts

   "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },

 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Answer 1

You should use the umd version of the script because it's browser compatible. In the scripts, array try to replace:

"node_modules/popper.js/dist/popper.min.js"

with:

"node_modules/popper.js/dist/umd/popper.min.js"