title: Why does my angular2 app initialize twice?
body: <p>Please tell me where my mistake is, my app is running the AppComponent code twice.
  I have 5 files:</p>
  
  <p><strong>main.ts:</strong></p>
  
  <pre><code>import { bootstrap } from '@angular/platform-browser-dynamic';
  import { enableProdMode } from '@angular/core';
  import { AppComponent, environment } from './app/';
  import { APP_ROUTER_PROVIDERS } from './app/routes';
  import {HTTP_PROVIDERS} from '@angular/http';
  import {ServiceProvider} from "./app/providers/app.service.provider"
  
  if (environment.production) {
    enableProdMode();
  }
  bootstrap(AppComponent, [ServiceProvider, APP_ROUTER_PROVIDERS, HTTP_PROVIDERS]);
  </code></pre>
  
  <p><strong>routes.ts</strong>:</p>
  
  <pre><code>import {provideRouter, RouterConfig} from '@angular/router';
  import {AppComponent} from "./app.component";
  import {ReportDetailComponent} from "./component/AppReportDetailComponent";
  import {ReportsListComponent} from "./component/AppReportListComponent";
  import {ReportCreateComponent} from "./component/AppReportCreateComponent";
  
  
  export const routes:RouterConfig = [
      {
        path: 'reports',
        children: [
          {path: ':id', component: ReportDetailComponent},
          {path:'', component: AppComponent },
          {path: 'create', component: ReportCreateComponent},
          {path: 'list', component: ReportsListComponent},
        ]
      }
    ];
  export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];
  </code></pre>
  
  <p><strong>app.component:</strong></p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {ReportNavComponent} from "./component/AppReportNavComponent";
  import { ROUTER_DIRECTIVES } from '@angular/router';
  @Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'tpl/app.component.html',
    styleUrls: ['app.component.css'],
    directives: [ROUTER_DIRECTIVES, ReportNavComponent]
  
  })
  export class AppComponent {
    constructor() {
    }
  }
  </code></pre>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;report-nav&gt;&lt;/report-nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>and last <strong>AppReportNavComponent.ts:</strong></p>
  
  <pre><code>import {Component} from "@angular/core";
  import {ROUTER_DIRECTIVES} from '@angular/router';
  @Component({
    selector: "report-nav",
    directives: [ROUTER_DIRECTIVES],
    template: `&lt;nav&gt;
    &lt;a [routerLink]="['/list']"&gt;List&lt;/a&gt;
    &lt;a [routerLink]="['/create']"&gt;Create new&lt;/a&gt;
  &lt;/nav&gt;`
  })
  
  export class ReportNavComponent {
    constructor() {
    }
  }
  </code></pre>
  
  <p>if I go to /reports I should  see two links "List" and "Create"
  but inside app-root tag  I see the secondary app-root tag (on the picture)
  <a href="https://i.stack.imgur.com/u5TA0.png" rel="nofollow noreferrer">screenshot</a>
  And my question is: why?</p>