Working Angular NavBar not working after Bootstrap upgrade 3 to 4

Question

I have a simple working NavBar developed in Angular4 with Bootstrap 3.3.7. When I try to upgrade to Bootstrap 4 (either 4.0.0-beta or 4.0.0-alpha.6) the NavBar is simply not displayed in the browser anymore (with no errors displayed in the console either).

HTML:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active current"><a routerLink="/messages"><b>Messages</b></a></li>
        <li routerLinkActive="active current"><a routerLink="/transformations"><b>Transformations</b></a></li>
        <li routerLinkActive="active current"><a routerLink="/actions"><b>Actions</b></a></li>
        <li routerLinkActive="active current"><a routerLink="/rules"><b>Rules</b></a></li>
      </ul>
    </div>
  </div>
</nav>

Typescript:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Any help greatly appreciated, thanks, Martin

Answer 1

The navbar structure and class names have changed from Bootstrap 3.x to 4.x. You need to migrate the 3.x code accordingly.

<nav class="navbar navbar-expand-xl bg-light navbar-light">
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="nav-item" routerlinkactive="active current">
                <a routerlink="/messages" class="nav-link"><b>Messages</b></a>
            </li>
            <li class="nav-item" routerlinkactive="active current">
                <a routerlink="/transformations" class="nav-link"><b>Transformations</b></a>
            </li>
            <li class="nav-item" routerlinkactive="active current">
                <a routerlink="/actions" class="nav-link"><b>Actions</b></a>
            </li>
            <li class="nav-item" routerlinkactive="active current">
                <a routerlink="/rules" class="nav-link"><b>Rules</b></a>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/RIbYHcOnQJ

Read more on what's changed and upgrade from 3.x to 4.x

Answer 2

The reason why your navbar is not displaying is because Bootstrap 4 is almost a complete rewrite of Bootstrap 3. In other words, the two versions are completely incompatible.

Here's an example of a basic navbar structure and components in Bootstrap 4:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" 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>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Also notice the various JavaScript components below. Those are essential to make the navbar work. Make sure you load them. In that order.

For your specific navbar the HTML would be this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
       <a class="navbar-brand" href="#">NavbarBrand</a>
       <button class="navbar-toggler" 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>

       <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav mr-auto">
               <li class="nav-item active" routerLinkActive="active current">
                   <a class="nav-link" routerLink="/messages"><b>Messages</b></a>
               </li>
               <li class="nav-item" routerLinkActive="active current">
                   <a class="nav-link" routerLink="/transformations"><b>Transformations</b></a>
               </li>
               <li class="nav-item" routerLinkActive="active current">
                   <a class="nav-link" routerLink="/actions"><b>Actions</b></a>
               </li>
               <li class="nav-item" routerLinkActive="active current">
                   <a class="nav-link" routerLink="/rules"><b>Rules</b></a>
               </li>
           </ul>
       </div>
   </div>
</nav>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

P.S. You should avoid using the container-fluid class for navbars because users on wide 4K screens will be mad at you. Use container instead (as shown in my last snippet).