Bootstrap Tab no longer functional in Angular CLI 13.3.0

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>