How to define default route with parameters in Angular Component Router?

Question

I want to have a default route in my sub-component (set with useAsDefault: true) and to have parameters automatically passed to it. I cannot find anywhere in documentation how to do it. I have a parent component with a following route:

$routeConfig = [
    { path: '/employees/...', component: 'employeesComponent', name: 'Employees'}
]

and a child component with:

$routeConfig = [
    { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group', useAsDefault: true}
    { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'}
]

This of course fails with: Route generator for 'group' was not included in parameters passed. I couldn't figure out how to pass the some default parameters to the first route. I did work arount it by creating yet another route without params, and using that as a default:

{ path: '/all', component: 'employeeListComponent', name: 'All', useAsDefault: true}

but that of course is not ideal. So far, I've not come up with anything better that using route without params, and then immediately redirecting with some default parameters. Isn't there a better way?

Answer 1

As far as I know this is not supported. You can have a route with and without the parameter and then in the GroupDefault component just navigate to Group

$routeConfig = [
    { path: '/group', component: 'employeeListComponentDefault', name: 'GroupDefault', useAsDefault: true}

    { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group'},
    { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'}
]

See also

• Optional Parameters While Routing angular2
• Angular 2 optional route parameter

Answer 2

So I solved my problem in following way: I added a default route without params, and I immediately redirect from $routerOnActivate

public $routeConfig = [
    { path: '/', component: 'employeeListComponent', name: 'GroupRedirect', useAsDefault: true},    
    { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group'}
    { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'},
]

and then in the controller:

public $routerOnReuse(route) {
  if (!route.params.group) {
    this.$router.navigate(['Group', { group: 'status', filter: 'active' }]);
  }
}