In my app.routes.ts,

export const routes: Routes = [
 ...
   {
     path: "student",
     component: StudentComponent,
     children: [
       {
         path: "first-component",
         component: FirstComponent,
       },
       {
         path: "second-component",
         component: SecondComponent,
       },
     ],
   },
...
];

In my student.component.html,

...
<mat-sidenav-content>
  <mat-toolbar>...</mat-toolbar>
  <router-outlet></router-outlet>
</mat-sidenav-content>
...

The code above creates some sort of a loop of components

I want to access the components in children property in app.routes.ts through <router-outlet> tag in student.component.html . Are there such ways to do so? If not, what are the workaround-ways?

Thank you in advance!