slowkazak slowkazak - 1 year ago 64
TypeScript Question

Why my angular2 app inicialize twice?

Please tell me where my mistake.
i've 5 files:


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) {
bootstrap(AppComponent, [ServiceProvider, APP_ROUTER_PROVIDERS, HTTP_PROVIDERS]);


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


import {Component, OnInit} from '@angular/core';
import {ReportNavComponent} from "./component/AppReportNavComponent";
import { ROUTER_DIRECTIVES } from '@angular/router';
selector: 'app-root',
templateUrl: 'tpl/app.component.html',
styleUrls: ['app.component.css'],
directives: [ROUTER_DIRECTIVES, ReportNavComponent]

export class AppComponent {
constructor() {



and last AppReportNavComponent.ts:

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

export class ReportNavComponent {
constructor() {

if i go to /reports i should see two link "List" and "Create"
but inside app-root tag i see secondary app-root tag (on picture)
And my quistion: why?

Answer Source

Because your default route points to AppComponent, so your route is rendering the AppComponent inside the AppComponent:

{path:'', component: AppComponent },

You probably should put there a DashboardComponent or HomeComponent.