Angular Routing child routes

Question

I have pretty weird question about routing. That's my code so far:

app.component.html

<router-outlet></router-outlet>

Main routing module

const routes: Routes = [
  { path: "", component: LogOnComponent },
  { path: "groups",  loadChildren: () => import ('./groups/groups.module').then(m => m.GroupsModule), canActivate: [AuthGuard]},
];

Child routing in Groups.module

const routes: Routes = [
  { path: '', component: MenuComponent, children: [
      { path: '', component: GroupsComponent, outlet: 'start-outlet' },
      { path: 'permissions', component: PermissionsComponent, outlet: 'start-outlet' }
    ]
  }, 
];

And Menu.component has a line with child routing

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

And in Groups.component i want to redirect user to groups/permission like said in groups routing.

<a [routerLink]="['permissions']" [state]="{ groupId: content.data.groupId }">link</a>

The problem is redirection doesn't work. Angular said that he can't find this route

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'groups/permissions' Error: Cannot match any routes. URL Segment: 'groups/permissions'

What am I doing wrong? Tried different placement of permissions but none seems to work. Any ideas of my mistakes?

Answer 1

I created a StackBlitz code sample. Here it is: https://stackblitz.com/edit/angular-ivy-fxcqoy?file=src/app/menu/menu/menu.component.html