Angular auxiliary route with an empty path on child

Question

I'm trying to use the auxiliary route on an empty path. For example:

  {
    path: 'users',
    children: [
      {
        path: '',
        component: UsersComponent,
      },
      {
        path: 'user-details',
        outlet: 'list',
        component: UserDetailsComponent
      },
    ]
  },

And my UsersComponent template:

<router-outlet></router-outlet>
<router-outlet name="list"></router-outlet>

But when I'm trying to navigate to the following URLs: 1. http://localhost:4200/users(list:user-details) 2. http://localhost:4200/(users//list:user-details)

I'm getting this error:

Cannot match any routes. URL Segment: 'users'

FussinHussin FussinHussin · Accepted Answer · 2017-10-06T15:04:16

You are getting that error because you have no component loading for 'users' which you set as your first route. the 'users' route should be defined in your main routing module like this

{ path: 'users', loadChildren: './users/user.module#UserModule' }

and your current code needs to look like this

const userRoutes: Routes = [
  {
    path: '', component: UsersComponent, children: [
      {
         path: 'user-details',
         outlet: 'list',
         component: UserDetailsComponent
      }
     ]
   }

and that will make the firs route 'users'

Angular auxiliary route with an empty path on child

1 Answers