title: Navbar drop-down menu not working with Angular and Bootstrap 4
body: <p>I'm developing a web application with Angular 5 and Bootstrap 4 and I'm having problems with the nav menu bar dropdowns. I'm following the documentation <a href="https://getbootstrap.com/docs/4.0/components/navs/" rel="noreferrer">https://getbootstrap.com/docs/4.0/components/navs/</a> but I don't know why drop-down menu doesn't work!</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class = "row align-items-end nopadding"&gt;
          &lt;div class = "col-md-3" style = "background-color: blanchedalmond"&gt;&lt;app-logo&gt;&lt;/app-logo&gt;&lt;/div&gt;
          &lt;div class = "col-md-6"&gt;
              &lt;ul class="nav justify-content-center"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link menu-item" href="#"&gt;Ligas&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link menu-item" href="#"&gt;Gráficas&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link menu-item" href="#"&gt;Artículos&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item dropdown"&gt;
                      &lt;a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;Clasificaciones&lt;/a&gt;      
                      &lt;div class=" dropdown dropdown-menu"&gt;
                          &lt;a class="dropdown-item menu-item" href="#"&gt;Equipos&lt;/a&gt;
                          &lt;a class="dropdown-item menu-item" href="#"&gt;Jugadoras&lt;/a&gt;
                          &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                          &lt;a class="dropdown-item" href="#"&gt;Separated link&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;                
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class = "col-md-3 right-content"&gt;
              Right column
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>Edit I:</strong></p>
  
  <p>I have added jquery and popper through npm, update muy angular-cli.json and restart the server:</p>
  
  <p><strong>angular-cli.json:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/r8M5z.png" rel="noreferrer"><img src="https://i.stack.imgur.com/r8M5z.png" alt="enter image description here"></a></p>
  
  <p>And when I load the page I've got this error:</p>
  
  <pre><code>Error in the source mapping: request failed with status 404 
  Resource URL: http://localhost:4200/ scripts.bundle.js 
  Sourcemap URL: bootstrap.min.js.map
  </code></pre>
  
  <p>When I have installed jquery I've got this output:</p>
  
  <p><a href="https://i.stack.imgur.com/USA3d.png" rel="noreferrer"><img src="https://i.stack.imgur.com/USA3d.png" alt="enter image description here"></a></p>
  
  <p>And when I hace installed popper I've got this output:</p>
  
  <p><a href="https://i.stack.imgur.com/ZDc8q.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZDc8q.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong?</p>