Угловая директива routerLink в модальном компоненте не работает должным образом

Question

Я столкнулся с довольно странной ситуацией с директивой routerLink, используемой в NgbModal. Для начала у меня есть функциональный модуль со структурой, подобной этой:

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

Маршрутизация определяется следующим образом (упрощенно):

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 }
    ]
  }
];

У меня есть модал, который открывается из компонента предпочтений, напримерэто:

  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);
    });
  }

Я не изменяю URL при открытии модального канала, поэтому я предлагаю, чтобы с точки зрения маршрутизатора ничего не менялось при открытии модального.

И в popup-компоненте, и в предпочтении-компоненте iесть такая ссылка:

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

Проблема в том, что из popup-компонента я перенаправлен на 404, а из настроек я перехожу к правому URL.

Описание проблемы может показаться слишком сложным, поэтому извините, если вы так чувствуете :) Я попытался упростить ситуацию.