title: Bootstrap 4 navbar not working with angular router links
body: <p>I have trouble setting up my router links on bootstrap 4 navbar syntax. Apparently they need href attributes to be able to click on them. Is there any way to enable them anyway?</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" routerLink="/dashboard" routerLinkActive="active"&gt;Dashboard&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" routerLink="/charts" routerLinkActive="active"&gt;Charts&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" routerLink="/map" routerLinkActive="active"&gt;Map&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" routerLink="/about" routerLinkActive="active"&gt;about&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" routerLink="/contact" routerLinkActive="active"&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>I have imported the styles and script into angular.json using the angular CLI latest.</p>
  
  <pre><code>"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/font-awesome/css/font-awesome.css",
      "src/styles.scss"
  ],
  "scripts": [
      "node_modules/jquery/dist/jquery.slim.js",
      "node_modules/popper.js/dist/umd/popper.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ] 
  </code></pre>