Angular 9 - js 脚本不工作（例如基础或引导程序）

Question

First steps in Angular (doing an online course) and I keep thinking that my JS is not working. Because when I ng serve the below project is see the foundation styling (css), but the hamburger Icon is not opening/closing when I click it. The code is a sample from the foundation website.

app.component.html looks like this

<h1>This is the app</h1>

<div class="title-bar" data-responsive-toggle="main-nav" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="main-nav"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="main-nav">
  <div class="top-bar-left">
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
      <li class="menu-text">Site title</li>
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Two</a></li>
    </ul>
  </div>
</div>

Through numerous topics in ended up with the following:

In styles.css I added

@import "../node_modules/foundation-sites/dist/css/foundation.min.css";

In angular.json I added

 "styles": [
              "src/styles.css",
              "node_modules/foundation-sites/dist/css/foundation.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/foundation-sites/dist/js/foundation.min.js"
            ]

My own thoughts on it:

• Hamburger Icon and styling is there but its not opening/closing
• My angular.json file is not named angular-cli.json (like in other examples...WHY??)
• I did not needed to../ the scripts, they only compile like above (else error)
• working on Unix (ubuntu)
• Jquery version 3.5.1 and foundation-sites 6.6.3

Answer 1

It's probably possible to get this to work, but plain-old Bootstrap uses jQuery to manipulate the DOM (eg open/close your toolbar when you click the hamburger menu icon).

jQuery really should not be used with Angular, because it could interfere with Angular's maintenance of the DOM. (jQuery would change the DOM, and Angular wouldn't know about it).

For this reason, there are a couple of other projects, including ngx-bootstrap, that either use Bootstrap's css but implement the js functionality in terms of Angular directives, or which look and operate like Bootstrap and re-implement (at least partially) the css and the js.