Bootstrap Tab no longer functional in Angular CLI 13.3.0

Issue

Issue Details

on clicking Change Password tab, there was an error message: Cannot match any routes. URL Segment: 'v-ChangePassword'

Am I missing anything?

Below is the screenshot of page where tabs are located.

Bootstrap has been added in the app module: import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Html Code

<div class="col-sm-2">
    <div class="nav flex-column nav-pills" id="v-tab" role="tablist" aria-orientation="vertical">
        <a 
            class="nav-link active" 
            id="v-profile-tab" 
            data-toggle="pill" 
            href="#v-profile" 
            role="tab" 
            aria-controls="v-profile" 
            aria-selected="true">
            Profile
        </a>
        <a 
            class="nav-link" 
            id="v-ChangePassword-tab" 
            data-toggle="pill" 
            href="#v-ChangePassword" 
            role="tab" 
            aria-controls="v-ChangePassword" 
            aria-selected="true">
            Change Password
        </a>
        <a 
            class="nav-link" 
            id="v-AccountAccessHistory-tab" 
            data-toggle="pill" 
            href="#v-AccountAccessHistory" 
            role="tab" 
            aria-controls="v-AccountAccessHistory" 
            aria-selected="true">
            Access History
        </a>
    </div>
</div>
<div class="col-md-10">
    <div class="tab-content" id="v-tabContent">
        <div 
            class="tab-pane fade show active" 
            id="v-profile" 
            role="tabpanel" 
            aria-labelledby="v-profile-tab">
            <basicsettings></basicsettings>
        </div>
        <div 
            class="tab-pane fade show" 
            id="v-ChangePassword" 
            role="tabpanel" 
            aria-labelledby="v-ChangePassword-tab">
            <changepassword></changepassword>
        </div>
        <div 
            class="tab-pane fade show" 
            id="v-AccountAccessHistory" 
            role="tabpanel" 
            aria-labelledby="v-AccountAccessHistory-tab">
            <accesslogs></accesslogs>
        </div>
    </div>
</div>

Solution

The issue is the href attributes on the tab are changing the URL. The Angular router is trying to resolve a route for the URL and failing, which is the error being shown.

To fix it, you can implement vertical tabs like the example here.

By the way, you should really be tagging this question with ng-bootstrap as it's more of an ng-bootstrap question than pure Angular.

Answered By - ian9912