Bootstrap4 navbar always crashed

Question

For some reason, the same code that I started working differently when I updated angular ... here is my navigator code

<nav *ngIf="authService.isLoggedin" class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" routerLink="home">Mavis</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item" *ngIf="authService.isAdmin"> <a class="nav-link" routerLink="settings">Settings</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="home">Home</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="session">Session</a> </li> </ul> <div class="nav navbar-nav navbar-right"> <button (click)="logout()" class="navbar-brand"><strong>Logout</strong></button> </div> </div> 

My problem is that navbar always crashes, regardless of the width of the screen, it looks great on the phone, but not on the desktop. I am sure that I have setup bootstrap with my angular 2 project correctly .. but, to be sure, I added them to my angular-cli.json file

 "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/popper.js/dist/umd/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],