Named router outlet for side by side display - with child routes

Question

I have a secondary router outlet in my app module as below.

<router-outlet></router-outlet> <==== PRIMARY
<mat-sidenav-container>
<mat-sidenav mode="over">
        <router-outlet name="side"></router-outlet> <=== SECONDARY NAMED OUTLET
      </mat-sidenav>
</mat-sidenav-container>

Then I have a feature module with child routes as below,

@NgModule({
    RouterModule.forChild([
          {
            path: "orders",
            component: OrdersComponent,
            children: [
              {
                path: "add",
                component: AddOrderComponent,
                outlet: "side", <=== SAYING PATH TO USE SECONDARY OUTLET DEFINED IN APP MODULE
              },
            ]
          },
        ])
})
export class OrdersModule {}

I am trying to display AddOrderComponent inside secondary outlet (name "side") in my app module, but the outlet is NOT activating.

<a [routerLink]="['../orders',{outlets: { side: ['add']}}]">
  Add New Order
</a>

If I move the secondary outlet into any other component inside the feature module it's working.

What special I need to define in routerLink or route definition to access secondary router outlet defined in AppModule from a feature module?

Note: This is NOT a lazy-loaded module. Importing into app module while bootstrapping itself.

Thanks.

Gopinath Gopinath · Accepted Answer · 2020-11-07T10:38:01

Just now read an answer on https://stackoverflow.com/a/53810892/3534886 explains the difference between Child Routes & Named Routes which I was confused myself. So feature module is not a problem in my case.

It says, A child route is for routes that should appear within another template.

A named route is for routes that should appear as a sibling to another template, such as a side by side display.

In my case,

I defined 2 parallel outlets (as siblings) in my app component. But wanted a child of feature module to render inside sibling.

Relationship conflict!

Named router outlet for side by side display - with child routes

1 Answers