append child component route to the parent component route

Question

I am new to angular. the child component route looks like /practice/NATA/(test:edit/59afb586c99fbb3068fce1f6/courses) and in the same child component clicking a button should change the route to /practice/NATA/(test:edit/59afb586c99fbb3068fce1f6/courses/duplicate/<courseid>) but i am getting the route like this /practice/NATA/(test:edit/59afb586c99fbb3068fce1f6/(courses//test:duplicate/593107b273790c30c4e08b03))

the child component routing module looks like this

    imports: [RouterModule.forChild([
    { path: '', component: NewEditPracticeComponent, outlet: 'test', canActivate: [AdminGuard] },
    { path: 'duplicate/:courseid', component: NewEditPracticeComponent, outlet: 'test', canActivate: [AdminGuard] },
]),

and [routerLink]="[{ outlets: { test: ['duplicate', item._id ]}}]"

the parent component routing module looks like this

 [RouterModule.forChild([
{
  path: ':course', component: PracticeComponent, canActivate: [CourseGuard], children: [
    { path: '', component: PracticeListComponent, outlet: 'test', pathMatch: 'full' },
    { path: 'new', loadChildren: './new-edit-practice/new-edit-practice.module#EditPracticeModule', outlet: 'test', canActivate: [AdminGuard] },
    { path: 'edit/:testid', loadChildren: './new-edit-practice/new-edit-practice.module#EditPracticeModule', outlet: 'test', canActivate: [AdminGuard] },
    // { path: 'duplicate/:courseid/:testid', loadChildren: './new-edit-practice/new-edit-practice.module#EditPracticeModule', outlet: 'test', canActivate: [AdminGuard] },

  ]
},
{ path: '', loadChildren: './practice-test/practice-test.module#PracticeTestModule' }
 ])]

and it is rendering the path edit/:testid . thanks in advance.

Answer 1

You need to append "./" to your routerlink attribute like this [routerLink]="[{ outlets: { test: ['./duplicate', item._id ]}}]" . It will ensure that the router will look inside the current router. You can check more info here