Bootstrap 4 Navbar折叠功能不起作用

Question

我已在线检查有关堆栈溢出的各种答案，但找不到适合我的情况的正确答案。我所做的就是创建了这个引导导航栏，代码如下所示。在这里，在手机上查看时我无法使折叠功能起作用。

bs-navbar.html

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand" routerLink="/">Rahul's Shop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" 
  aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarContent">
 <ul class="navbar-nav mr-auto">
  <li class="nav-item">
    <a class="nav-link" routerLink="/shopping-cart">
      Shopping Cart
      <span class="badge badge-warning badge-pill" *ngIf="cart$ | async as cart">
        {{ cart.totalItemsCount }}
      </span>
    </a>
  </li>
  <ng-template #anonymousUser>
    <li class="nav-item">
      <a class="nav-link" routerLink="/login">Login</a>
    </li>
  </ng-template>
  <li ngbDropdown *ngIf="appUser; else anonymousUser" class="nav-item dropdown">
    <a ngbDropdownToggle class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      {{ appUser.name }}
    </a>
    <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown01">
      <a class="dropdown-item" routerLink="my/orders">My Orders</a>
      <ng-container *ngIf="appUser.isAdmin">
        <a class="dropdown-item" routerLink="admin/orders">Manage Orders</a>
        <a class="dropdown-item" routerLink="admin/products">Manage Products</a>
      </ng-container>
      <a class="dropdown-item" (click)="logout()">Logout</a>
    </div>
  </li>
</ul>

我也这样导入了jQuery：

angular.json

"scripts": ["./node_modules/jquery/dist/jquery.min.js"]

styles.css

@import "~bootstrap/dist/css/bootstrap.css";

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body {
   padding-top: 80px;
}

html, body { height: 100%; }

body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }