Как обновить содержимое вкладки с помощью Bootstrap 4 / bootstrap-native-v4

Я хочу представить вкладки с использованием Bootstrap 4 с bootstrap-native-v4 в приложении Angular 2. (Я включаю bootstrap-native-v4 через значение 'scripts' файла angular.json "./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js" - обратите внимание, я вижу bootstrap-native-v4 включены в исходный [файл scripts.js] при просмотре с помощью инструментов разработчика Chrome)

Я использую localhost: 4200 / myfolder для локального запуска моего приложения, однако для приведенного ниже кода, когда я наводю указатель мыши / щелкаю вкладки, URL-адрес по умолчанию - localhost: 4200 / # home (вместо localhost: 4200 / myfolder # home), localhost: 4200 / # profile (вместо localhost: 4200 / myfolder # profile) и т. д.

Так что происходит то, что страница отправляет сообщение по несуществующему URL-адресу.

Я попытался установить BaseURL в голове, однако, хотя это устраняет проблему с URL-адресом, страница не обновляет содержимое, когда я нажимаю на вкладки. Я также попытался установить href для каждой привязки к myfolder # home, myfolder # profile и т. д., Но снова, хотя это исправляет проблему с URL-адресом (без обратной передачи), содержимое вкладки не обновляется

Я действительно хочу избежать использования JQuery (следовательно, использование bootstrap-native-v4) - большинство / все примеры, похоже, используют JQuery - я пытаюсь перейти через API данных (JS в области bootstrap-native-v4 в порядке хотя)

<!-- Nav tabs -->
<ul class = "nav nav-tabs" id = "myTab" role = "tablist" data-tabs = "tabs">
  <li class = "nav-item">
    <a class = "nav-link active" id = "home-tab" data-toggle = "tab" href = "#home" role = "tab" aria-controls = "home" aria-selected = "true">Home</a>
  </li>
  <li class = "nav-item">
    <a class = "nav-link" id = "profile-tab" data-toggle = "tab" href = "#profile" role = "tab" aria-controls = "profile" aria-selected = "false">Profile</a>
  </li>
  <li class = "nav-item">
    <a class = "nav-link" id = "messages-tab" data-toggle = "tab" href = "#messages" role = "tab" aria-controls = "messages" aria-selected = "false">Messages</a>
  </li>
  <li class = "nav-item">
    <a class = "nav-link" id = "settings-tab" data-toggle = "tab" href = "#settings" role = "tab" aria-controls = "settings" aria-selected = "false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class = "tab-content">
  <div class = "tab-pane active" id = "home" role = "tabpanel" aria-labelledby = "home-tab">a...</div>
  <div class = "tab-pane" id = "profile" role = "tabpanel" aria-labelledby = "profile-tab">b...</div>
  <div class = "tab-pane" id = "messages" role = "tabpanel" aria-labelledby = "messages-tab">c...</div>
  <div class = "tab-pane" id = "settings" role = "tabpanel" aria-labelledby = "settings-tab">d...</div>
</div>

Мне нужен код для обратной передачи нет на сервер и просто переключаться между вкладками, показывающими содержимое соответствующей вкладки

Кто-нибудь может помочь?