Страница перезагружается каждый раз, когда я нажимаю на элемент с вкладками. Angular и Bootstrap

Question

Я пытаюсь сделать простую навигацию по вкладкам с двумя вкладками для своих компонентов, пока я реализую эти вкладки следующим образом:

<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-tabs">
      <li class="nav-item"> <a href="" class="nav-link active" data-toggle="pill" data-target="#tabone"><i class="fa fa-file-o fa-md"></i>&nbsp;DIGITALIZAR</a> </li>
      <li class="nav-item"> <a class="nav-link" href="" data-toggle="pill" data-target="#tabtwo"><i class="fa fa-paperclip fa-lg"></i>&nbsp;ADJUNTAR</a> </li>
    </ul>
    <div class="tab-content mt-2">
      <div class="tab-pane fade active show" id="tabone" role="tabpanel">
        <div [hidden]="hayParametrosEscaner" style="text-align: center;">
          <app-parametros-scanner (parametros)="onParams($event)" ></app-parametros-scanner>
        </div>
        <div [hidden]="!verVisor">
          <app-imagegallery #visorImagenes></app-imagegallery>
        </div>
        <div class="control-buttons">
          <button class="tolowercase" mdbBtn color="primary" mdbWavesEffect (click)="verImagenes()">{{escaneoExtra}}</button>
          <button class="tolowercase" [hidden]="!verVisor" [disabled]="enviandoArchivos" mdbBtn color="primary" mdbWavesEffect
            (click)="enviarAlServidorDesdeVisor()"> Enviar selección al
            servidor</button>
          <button class="tolowercase" [hidden]="verVisor" [disabled]="enviandoArchivos" mdbBtn color="primary" mdbWavesEffect
            (click)="enviarAlServidorDesdeFuente()"> Escanear y guardar</button>
        </div>
      </div>
      <div class="tab-pane fade" id="tabtwo" role="tabpanel">
        TEST
      </div>
    </div>
  </div>
</div>

И в браузере это выглядит так:

Но !!! Дело в том, что каждый раз, когда я нажимаю на любую из вкладок, страница перезагружается вместо смены вкладки. Как будто приложение зависало и перезагружалось или что-то в этом роде, и я не знаю почему.