Angular redirect to child view by default

Question

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

After I pressed / tenant, I want to somehow show the contents of both tenants with subsequent audit? Is it possible? My client URL is as follows 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

instead, you can use an empty child route:

 { 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

Here is my setup that 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 get around

Here is 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 route ** is backup and should be listed last.

Answer 3

I think you should declare the route twice, one with the component and the other with redirectTo. Then in the child routes, in the path, do not define the parent route. Like this:

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AuthGuard } from './auth.guard'; import { LoginViewComponent } from './views/login/login.cmp'; import { UserSearchViewComponent } from './views/userSearch/user-search.cmp'; import { SearchingByCriteriaViewComponent } from './views/userSearch/criteriaSearch/criteriaSearch.cmp'; import { InputsExampleViewComponent } from './views/inputsExample/example.cmp'; const routes: Routes = [ { path: '', component: LoginViewComponent }, { path: 'busqueda', redirectTo: 'busqueda/criterio', canActivate: [AuthGuard] }, { path: 'busqueda', component: UserSearchViewComponent, children: [ { path: 'criterio', component: SearchingByCriteriaViewComponent, canActivate: [AuthGuard] } ] }, { path: 'example', component: InputsExampleViewComponent }, { path: '**', redirectTo: '' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }