Angular redirect to default child view

Question

I have the following route configuration but I am getting the error Invalid configuration of route 'tenant': redirectTo and children cannot be used together

Once I have clicked /tenant I want to somehow show contents of both tenant followed by audit ? Is this possible ? My tenant URL looks like following http://localhost:8080/#/tenant

{     path: 'tenant',     redirectTo: '/tenant/(view:audit)',      pathMatch: 'full',     component: TenantComponent,     data: {         authorities: ['ROLE_USER', 'ROLE_ADMIN'],         pageTitle: 'tenant.home.title'     },     children: [         {             path: 'audit',             component: PacketDataComponent,             data: {                 authorities: ['ROLE_USER', 'ROLE_ADMIN'],                 pageTitle: 'tenant.home.title'             },         }     ] } 

Answer 1

you can use an empty child route instead :

{     path: 'tenant',     component: TenantComponent,     children: [         {             path: '',             pathMatch: 'full',             redirectTo: 'audit'         },         {             path: 'audit',             component: PacketDataComponent,             data: {                 authorities: ['ROLE_USER', 'ROLE_ADMIN'],                 pageTitle: 'tenant.home.title'             },         }     ] } 

Answer 2

Heres my setup which seems to work ..

import {RouterModule, Routes} from '@angular/router'; import {Route1Component} from './routes/route1/route1.component'; import {Route1DetailComponent} from './routes/route1/detail/route1-detail.component'; import {Route1ListComponent} from './routes/route1/list/route1-list.component'; import {Route2Component} from './routes/route2/route2.component';  const routes: Routes = [   {     path: 'route1',     component: Route1Component,     children: [       {path: ':id', component: Route1DetailComponent},       {path: '', component: Route1ListComponent}     ]   },   {path: 'route2', component: Route2Component},   {     path: '',     pathMatch: 'prefix',     redirectTo: '/route1'   } ];  export const routing = RouterModule.forRoot(routes); 

Project at .. https://github.com/danday74/angular2-coverage/blob/master/app/app.routes.ts .. if you want to have a poke around

Heres another one ..

import {RouterModule, Routes} from '@angular/router';  import {ParentRouteComponent} from './routes/parent-route/parent-route.component'; import {ChildRoute1Component} from './routes/parent-route/child-route-1/child-route-1.component'; import {ChildRoute2Component} from './routes/parent-route/child-route-2/child-route-2.component'; import {HomeComponent} from './routes/home/home.component'; import {PageNotFoundComponent} from './routes/page-not-found/page-not-found.component';  export const routes: Routes = [   {     path: 'parent',     component: ParentRouteComponent,     children: [       {         path: '',         component: ChildRoute1Component,       },       {         path: ':id',         component: ChildRoute2Component,         data: {           title: 'My title'         }       }     ]   },   {     path: '',     component: HomeComponent   },   {     path: '**',     component: PageNotFoundComponent   } ];  export const routing = RouterModule.forRoot(routes); 

taken from ..

https://github.com/danday74/angular2-router-simple/blob/master/app/app.routes.ts

Here the ** route is the fallback and should be listed last.