How to provide multiple router outlet in a template with same path?

Question

I have used two router-outlet in a component. Navigation for routing is working fine for me. But I want to give routing path properly. Now I am facing unexpected routing path.

The following is my app.component.html

<h2>Details </h2>
<ul>
  <li>
    <a [routerLink]="[{ outlets: { chart: 'line',range: 'line' } }]"> Line </a>
  </li>
  <li>
    <a [routerLink]="[{ outlets: { chart: ['area'], range: ['area'] } }]">Area</a>
  </li>
</ul>

<div class="row">
  <div class="column">
    <router-outlet name='chart'></router-outlet>
  </div>
  <div class="column">
    <router-outlet name="range"></router-outlet>
  </div>
</div>

Now I am getting routing path as http://localhost:4200/(chart:line//range:line). But I need a routing path as http://localhost:4200/line.

I have used the following routes in my app-routing.module.ts

const routes: Routes = [
  {
    path: 'line',
    component: LineChartComponent,
    outlet: 'chart'
  },
  {
    path: 'line',
    component: LineRangeComponent,
    outlet: 'range'
  },
  {
    path: 'area',
    component: AreaChartComponent,
    outlet: 'chart'
  },
  {
    path: 'area',
    component: AreaRangeComponent,
    outlet: 'range'
  }
];

Can anyone suggest me to how I can acheive my expected routing path?

Thanks in advance.

Answer 1

I recommend you merge 2 outlets into 1. And create wrapper component to contain both components (Range and Chart) and use that wrapper component in router configuration instead.