Barra de navegação lateral vertical - Angular 4 e Bootstrap 3

Instalei o bootstrap 3 no meu projeto angular 4 usando o instalador do npm. Eu tenho um site básico pronto e estou tentando obter uma barra sideNav dinâmica que alterne entre elas.

Eu já vi alguns exemplos online, mas eles não parecem funcionar, seja uma versão mais recente do bootstrap ou problemas de compatibilidade com o angular.

Alguém tem alguma recomendação para uma barra de navegação que eu poderia usar nesta instância?

O HTML no meuapp.component.html:

<!-- Sidebar -->
<script src="src/Javascript/sidebar.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-left" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
        <li class="sidebar-brand">
            <a href="#">
                Brand
            </a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Events</a>
        </li>
        <li>
            <a href="#">Team</a>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Works <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Services</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>

questionAnswers(2)

yourAnswerToTheQuestion