Angular 2 nested navigation with new router

Question

How can I achieve nested navigation? I had this with the previous router.

{ path: '/admin/...', component: AdminLayoutComponent }

It seems that from rc1 angular2 doesn't support this.

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

Notice that the path ends with a slash and three trailing periods (/...).

That means this is an incomplete route (a non-terminal route). The finished route will be some combination of the parent /crisis-center/ route and a route from the child router that belongs to the designated component.

EDIT: These are my routes

//AppComponent
@Routes([
    { path: '/admin-login', component: AdminLoginLayoutComponent },
    { path: '/admin', component: AdminLayoutComponent },
    { path: '/edit', component: EditReportLayoutComponent },
    { path: '/', component: WebLayoutComponent },
])

//WebLayoutComponent
@Routes([
    { path: '/details/:id', component: DetailsComponent },
    { path: '/applications', component: ApplicationsComponent },
    { path: '/statistics', component: StatisticsComponent },
    { path: '/addreport', component: NewReportComponent },
    { path: '/register', component: RegisterComponent },
    { path: '/account', component: AccountComponent },
    { path: '/login', component: LoginComponent },
    { path: '/feed', component: AllFeedComponent },
    { path: '/', component: MapComponent }
])

EDIT: Added a minimum example on plunker http://plnkr.co/edit/4TAd436l91zGX2emsxEF?p=preview

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-05-13T20:28:36

Just remove the /... they are not needed in the new router if you have child routes. There are still a few issues with the new router and not all features are available. One (pitfall is that the order of routes is relevant (~~will be fixed~~ by design). The most specific (longest) route should come first and the more generic one last (like /, or *)

Angular 2 nested navigation with new router

1 Answers