Почему мое приложение angular2 инициализируется дважды?

Question

Пожалуйста, скажите мне, где моя ошибка, мое приложение запускает код AppComponent дважды. У меня есть 5 файлов:

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> 

и последний 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() { 
    } 
} 

если я пойду в/отчеты я должен увидеть две ссылки "Список" и "Создать" , но внутри тега app-root Я вижу вторичный тег app-root (на картинке) screenshot И мой вопрос: почему?

Answer 1

Поскольку ваши стандартные точки маршрута к AppComponent, так что ваш маршрут является оказание AppComponent внутри AppComponent:

{path:'', component: AppComponent }, 

Вы, вероятно, следует поместить туда DashboardComponent или HomeComponent.