Выпадающий список не работает в компоненте Navbar

Question

Я делал проект в Angular с бэкэндом Node (и Express), и у меня возникли некоторые трудности, потому что у меня есть выпадающий список, который является общим для всех моих страниц и находится в компонент навигационной панели. Единственная проблема заключается в том, что когда я нажимаю в "Опций" (Настройки), параметры ниже не отображаются. Я попытался переименовать ссылки и поиграть с ними, попробовав несколько подходов, но безуспешно. Используемая мной панель навигации была взята из шаблона bootstrap.

Вот код компонента Navbar:

<nav class="navbar navbar-expand-lg navbar navbar-dark fixed-top" style="background-color: orange;">
  <a style="font-weight: bold;" class="navbar-brand">E-Tour</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a style="color: #ffffff; font-size: 20px;" class="nav-link" [routerLink]="['/home']" routerLinkActive="router-link-active">Home</a>
      </li>
      <li class="nav-item">
        <a style="color: #ffffff; font-size: 20px;" class="nav-link" [routerLink]="['/login']" routerLinkActive="router-link-active">Pacotes</a>
      </li>
      <li class="nav-item">
        <a style="color: #ffffff; font-size: 20px; " class="nav-link" [routerLink]="['/produtor']" routerLinkActive="router-link-active">Empresa</a>
      </li>
      <li class="nav-item">
        <a style="color: #ffffff; font-size: 20px; " class="nav-link" [routerLink]="['/admin']" routerLinkActive="router-link-active">Administrador</a>
      </li>
    </ul>
    <a style="color: #ffffff; font-size: 20px;" class="nav-link" [routerLink]="['/cliente']" routerLinkActive="router-link-active" *ngIf="userSatus$">{{nome}}</a>
    <ul class="nav navbar-nav navbar-right">
      <li class="nav-item dropdown ml-3">

        <!-- This is the part where I click and it doesn't open the dropdown -->
        <a style="margin-right: 2.5em; color: ghostwhite; font-size: 20px;" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  
          Opções
        </a>

        <!-- Those are the options that are never shown -->
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" [routerLink]="['/login']" routerLinkActive="router-link-active" *ngIf="!userSatus$">Login</a>
          <div class="dropdown-divider" *ngIf="!userSatus$"></div>
          <a class="dropdown-item" [routerLink]="['/registo']" routerLinkActive="router-link-active">Registar Cliente</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" [routerLink]="['/registerProdutor']" routerLinkActive="router-link-active">Registar Empresa</a>
          <div class="dropdown-divider" *ngIf="userSatus$"></div>
          <a class="dropdown-item" [routerLink]="['/logout']" routerLinkActive="router-link-active" (click)="logout()" *ngIf="userSatus$">Logout</a>
        </div>

      </li>
    </ul>
  </div>
</nav>

Я пытаюсь повторно использовать интерфейс проекта Я использовал с angular 8. Может ли это быть связано? Заранее спасибо за помощь.