0

I am having a lazy loaded module which should load different child routes depending on a condition. I tried to the following, but now some child components are not shown:

const routes: Routes = [
  {
    matcher: isAdminMatcher,
    component: UserBaseComponent, children: [
      { path: '', component: AdminUserListComponent},
      { path: 'new', component: AdminUserDetails},
      { path: ':id', component: AdminUserDetails}
    ]
  },
  {
    matcher: isUserMatcher,
    component: UserBaseComponent, children: [
      { path: '', component: UserListComponent},
      { path: ':id', component: AdminUserOverview },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule{ }

The matchers look like this:

export function isAdminMatcher(url: UrlSegment[]) {
    const userContextService = applicationInjector.get(UserContextService);
    return userContextService.isAdmin? ({ consumed: url.slice(0, 2) }) : null;
}

export function isUserMatcher(url: UrlSegment[]) {
    const userContextService = applicationInjector.get(UserContextService);
    return userContextService.isRegularUser? ({ consumed: url.slice(0, 2) }) : null;
}

The list components are visible just fine ("settings/users"), but when trying to route to the details, nothing happens ("settings/users/1").

Someone having an idea what I am doing wrong?

Julia
  • 137
  • 3
  • 13

0 Answers0