Почему переключение боковой панели bootstrap не работает в angular панели администратора

Question

Я хочу интегрировать админ-панель в angular 9, поэтому я делаю три компонента, такие как верхний и нижний колонтитулы, боковая панель и внутри моего админ-компонента, я добавляю эти три компонента, они работают, но когда я нажимаю ссылку на боковую панель, они перенаправляются на страницу входа вместо того, чтобы переключать ссылку на боковую панель и не работать боковую панель, как я могу это исправить, спасибо заранее.

в моем admin.component. html

<app-header></app-header>
<app-sidebar></app-sidebar>
 <router-outlet></router-outlet>
<app-footer></app-footer>

внутри моего sidebar.component. html

    <!-- Sidebar mobile toggler -->
    <div class="sidebar-mobile-toggler text-center">
        <a href="#" class="sidebar-mobile-main-toggle">
            <i class="icon-arrow-left8"></i>
        </a>
        Navigation
        <a href="#" class="sidebar-mobile-expand">
            <i class="icon-screen-full"></i>
            <i class="icon-screen-normal"></i>
        </a>
    </div>
    <!-- /sidebar mobile toggler -->


    <!-- Sidebar content -->
    <div class="sidebar-content">

        <!-- User menu -->
        <div class="sidebar-user">
            <div class="card-body">
                <div class="media">
                    <div class="mr-3">
                        <a href="#"><img src="./assets/global_assets/images/demo/users/face11.jpg" width="38" height="38" class="rounded-circle" alt=""></a>
                    </div>

                    <div class="media-body">
                        <div class="media-title font-weight-semibold">Victoria Baker</div>
                        <div class="font-size-xs opacity-50">
                            <i class="icon-pin font-size-sm"></i> &nbsp;Santa Ana, CA
                        </div>
                    </div>

                    <div class="ml-3 align-self-center">
                        <a href="#" class="text-white"><i class="icon-cog3"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /user menu -->


        <!-- Main navigation -->
        <div class="card card-sidebar-mobile">
            <ul class="nav nav-sidebar" data-nav-type="accordion">

                <!-- Main -->
                <li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu" title="Main"></i></li>
                <li class="nav-item">
                    <a href="index.html" class="nav-link active">
                        <i class="icon-home4"></i>
                        <span>
                            Dashboard
                        </span>
                    </a>
                </li>
                <li class="nav-item nav-item-submenu">
                    <a href="#" class="nav-link"><i class="icon-color-sampler"></i> <span>Themes</span></a>

                    <ul class="nav nav-group-sub" data-submenu-title="Themes">
                        <li class="nav-item"><a href="index.html" class="nav-link active">Default</a></li>
                        <li class="nav-item"><a href="http://demo.interface.club/limitless/demo/Template/layout_1/LTR/material/full/index.html" class="nav-link">Material</a></li>
                        <li class="nav-item"><a href="http://demo.interface.club/limitless/demo/Template/layout_1/LTR/dark/full/index.html" class="nav-link">Dark</a></li>
                        <li class="nav-item"><a href="http://demo.interface.club/limitless/demo/Template/layout_1/LTR/clean/full/index.html" class="nav-link disabled">Clean <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
                    </ul>
                </li>

            </ul>
        </div>
        <!-- /main navigation -->

    </div>
    <!-- /sidebar content -->

</div>
<!-- /main sidebar -->