title: Angular/Boostrap - Navbar doesn't display properly
body: <p>Recently I added Bootstrap 4, jQuery and Popper to my project, but the problem is when I render my webpage it shows the navbar like this (which it goes in a component called header):
  <a href="https://i.stack.imgur.com/CW0JF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CW0JF.png" alt="enter image description here"></a></p>
  
  <p>Also I added in my angular-cli.json:</p>
  
  <pre><code>"styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "styles.css"
  ],
  "scripts": [
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/popper.js/dist/umd/popper.min.js",
      "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],
  </code></pre>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-light bg-light"&gt;
    &lt;button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse"
            data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
            aria-expanded="false" aria-label="Toggle navigation"&gt;&lt;/button&gt;
    &lt;div class="collapse navbar-expand-md" id="collapsibleNavId"&gt;
      &lt;a class="navbar-brand" href="#"&gt;My App/Logo with Text&lt;/a&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Nav 1 &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Nav 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="" id="dropdownId"
             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Nav 3 dropdown&lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="dropdownId"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Action 1&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Action 2&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class="form-inline float-xs-right"&gt;
        &lt;input class="form-control" type="text" placeholder="Search"&gt;
        &lt;button class="btn btn-outline-success" type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>