Angular 2应用程序中的子路由

Question

I try to implement child route in my ng2-app. After starting app i get exception "Component "AppComponent" has no route config." Here is my code below:

main.ts:

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
import {FORM_PROVIDERS} from "@angular/forms";
import {HTTP_PROVIDERS} from "@angular/http";
import {AuthenticationService} from "./authentication/authentication.service";
import {provideRouter} from "@angular/router";
import {routes} from "./app.routes";
import {ROUTER_PROVIDERS} from "@angular/router-deprecated";

bootstrap(AppComponent, [
    provideRouter(routes),
    ROUTER_PROVIDERS,
    FORM_PROVIDERS,
    HTTP_PROVIDERS,
    AuthenticationService
]);

app.routes.ts:

export const routes:RouterConfig = [
    {path: '', component: HomeComponent, canActivate: [AuthenticationService]},
    {path: 'login', component: LoginComponent},
    {path: 'signup', component: SignupComponent},
    {path: 'home', component: HomeComponent, canActivate: [AuthenticationService], children: [
        {path: 'first-component', component: FirstComponent},
        {path: 'second-component', component: SecondComponent}
    ]},
    {path: '**', component: HomeComponent, canActivate: [AuthenticationService]}
];

app.component.ts:

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
@Component({
    selector: 'my-app',
    template: `
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class AppComponent {
    constructor(public router:Router) {
    }
}

home.component.ts:

import {Component} from "@angular/core";
import {SidebarComponent} from "./sidebar/sidebar.component";
import {HeaderComponent} from "./header/header.component";
import {ROUTER_DIRECTIVES} from "@angular/router-deprecated";
import {Router} from "@angular/router";
@Component({
    selector: 'trinjer-home',
    template: `
        <header></header>
        <sidebar></sidebar>
        <router-outlet></router-outlet>
    `,
    directives: [SidebarComponent, HeaderComponent, ROUTER_DIRECTIVES]
})
export class HomeComponent {
    constructor(private router: Router) {
    }
}

Can't understand, what i do wrong, how to configure this child routing inside home.component?
Thanks!

Answer 1

You must set one of the children as a defalut for the parent component by setting the path as an empty string

{path: 'home', component: HomeComponent, canActivate: [AuthenticationService], children: [
    {path: '', redirectTo: 'first-component', 
    {path: 'first-component', component: FirstComponent},
    {path: 'second-component', component: SecondComponent}
]},

check this from the official documentation

https://angular.io/docs/ts/latest/guide/router.html

Also check this tutorial it might help you understand it more

http://angular-2-training-book.rangle.io/handout/routing/child_routes.html