Perché la mia app angular2 si inizializza due volte?

Question

Ti prego, dimmi dov'è il mio errore, la mia app sta eseguendo il codice AppComponent due volte. Ho 5 file:

main.ts:

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]); 

routes.ts:

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)]; 

app.component:

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() { 
    } 
} 

app.component.html:

<report-nav></report-nav> 
<router-outlet></router-outlet> 

e ultimo AppReportNavComponent.ts:

import {Component} from "@angular/core"; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 
@Component({ 
    selector: "report-nav", 
    directives: [ROUTER_DIRECTIVES], 
    template: `<nav> 
    <a [routerLink]="['/list']">List</a> 
    <a [routerLink]="['/create']">Create new</a> 
</nav>` 
}) 

export class ReportNavComponent { 
    constructor() { 
    } 
} 

se vado a/rapporti che dovrebbe vedere due link "Lista" e "Crea" ma nel tag app-root vedo il tag root app-app secondario (nella foto) screenshot E la mia domanda è: perché?

Answer 1

Perché i vostri punti del percorso di default per AppComponent, in modo che il percorso sta rendendo la AppComponent all'interno del AppComponent:

{path:'', component: AppComponent }, 

Probabilmente si dovrebbe mettere lì un DashboardComponent o HomeComponent.