Angular routerLink directive in modal component not working as expected

Question

I encountered pretty strange situation with routerLink directive used in NgbModal. To start, I have feature module with structure like this:

-feature/
  -components/
    -popup-component/
      popup-component.ts
    -preferences-component/
      preferences-component.ts
    index.ts
  +containers/
  feature-routing.module.ts
  feature.module.ts

The routing is defined like this(simpified):

export const routes: Routes = [
  {
    path: '',
    component: ContainerPageComponent
  },
  {
    path: ':id',
    component: AnotherContainerPageComponent,
    children: [
      { path: '', redirectTo: 'some-route' },
      { path: 'preferences', component: PreferencesComponent },
      { path: 'rules/new', component: OtherComponent }
    ]
  }
];

I have modal that is opened from preferences component like this:

  addRulePopup() {
    const ref = this.modalService.open(PopupComponent, {
      backdrop: 'static',
      centered: true,
      size: 'lg',
      backdropClass: 'bg-white-opaque force-opaque no-border',
      windowClass: 'no-border'
    });
    ref.result.then(e => {
      console.log(e);
    });
  }

I don't change url when opening modal so i suggest that from router's perspective nothing changes when i open modal.

In both popup-component and preferences-component i have link like this:

<div class="rule" routerLink="../rules/new">

The problem is that from popup-component i'm redirected to 404, while from preferences i navigate to right url.

Description of problem may seem overcomplicated, so sorry if you feel so :) i tried to simplify things.

Answer 1

i have already resolved the problem by using router.navigate from controller, passing activated route instance, like this:

this.router.navigate(['../../preferences'], { relativeTo: this.route });