title: Angular `<router-outlet>` displays template twice
body: <p>I'm using angular4 and trying to create a router link. The router link works but displays the template twice.
  <a href="https://i.stack.imgur.com/h2SzZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/h2SzZ.png" alt="duplicate component"></a></p>
  
  <p>Below is my code in the component:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-root',
    template: `
    &lt;h1&gt;Contacts App&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a [routerLink]="['/facebook/top']"&gt;Contact List&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `
  })
  export class AppComponent {
      constructor(
          private route: ActivatedRoute,
          private router: Router,
      ){ }
  
      gotoDetail(): void {
          this.router.navigate(['facebook/top']);
      }
  }
  </code></pre>
  
  <p>my routes:</p>
  
  <pre class="lang-js prettyprint-override"><code>const routes: Routes = [
    { path: '', component: AppComponent },
    { path: 'facebook/top',  component: CommentComponent },
  ];
  
  @NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
  })
  export class AppRoutingModule {}
  </code></pre>