CODEWITHSUNDEEP
angularangular2-routing
Saurabh Kumar
Saurabh Kumar

Reputation: 16651

Angular redirect to default child view

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'
            },
        }
    ]
}

Upvotes: 38

Views: 31429

Answers (3)

Chema
Chema

Reputation: 936

I think you have to declare the route twice, one with the component and another with the redirectTo. Then in children routes, in the path, do not define the parent route. Like these:

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 { }

Upvotes: 1

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37343

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'
            },
        }
    ]
}

Upvotes: 113

danday74
danday74

Reputation: 56936

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.

Upvotes: 2

Related Questions