Bootstrap 4 Функция свертывания Navbar не работает

Question

Я проверил различные ответы онлайн на переполнение стека и не смог найти правильный ответ для моего случая. Я создал bootstrap navbar, код показан ниже. Здесь я не могу включить функцию свертывания при просмотре на телефоне.

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

стили. 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; }