title: <router-outlet> makes html content disappear in Angular
body: <p>I am not sure why <code>&lt;router-outlet&gt; &lt;/router-outlet&gt;</code> makes the content of <code>app.component.html</code> disappear. For example, since I do not have <code>&lt;router-outlet&gt; &lt;/router-outlet&gt;</code> in the below code everything is fine.</p>
  
  <p><strong><code>app.component.html</code></strong></p>
  
  <pre><code>&lt;div style="text-align:center"&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="navbar-header"&gt;
              &lt;a class="navbar-brand" href="#"&gt;Abdulaziz&lt;/a&gt;
            &lt;/div&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;
                &lt;a href="#home"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#pics"&gt;Pictures&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="links.html"&gt;Links&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#articles"&gt;Articles&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
  
        &lt;br&gt; &lt;br&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>whenever I add <code>&lt;router-outlet&gt; &lt;/router-outlet&gt;</code> under the <code>&lt;/div&gt;</code> the content disappear immediately. Note that this problem does not show up in another project I have.</p>