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!
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
Also check this tutorial it might help you understand it more
http://angular-2-training-book.rangle.io/handout/routing/child_routes.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.