Accessing children in auxiliary routing : Angular

Question

I have root routing defined as

const routes: Routes = [{
    path: '',
    component: HomeComponent
  },
  {
    path: 'module1',
    loadChildren: './module1/module1.module#Module1Module'
  },
  {
    path: '**',
    redirectTo: ''
  }
];

the module1.routing.ts has:

const routes: Routes = [{
  path: '',
  component: SubModule1Component,
  children: [{
      path: 'mod1child1',
      component: SubMod1Child1Component
    },
    {
      path: 'mod1child2',
      component: SubMod1Child2Component,
      children: [{
          path: '',
          component: Outlet1Component,
          outlet: 'outlet1'
        },
        {
          path: 'newout1',
          component: Outlet1NewComponent,
          outlet: 'outlet1'
        },
        {
          path: '',
          component: Outlet2Component,
          outlet: 'outlet2',
          children: [{
            path: 'childoutlet2',
            component: ChildOutlet2Component,
            outlet: 'outlet2'
          }],
        },
      ],
    },
  ],
  canActivate: [AuthGuardService],
}, ];

This code works when I navigate to /module1/mod1child2 as below:

My HTML page for above image is:

<h1>Child 2</h1>

<button [routerLink]="[{outlets: {'outlet1': ['newout1']}}]">Change Outlet 1</button>
<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button>
<div style="display: flex;">
  <div style="display: grid ;border: 1px solid red; width: 50%;height: 100px;float:left">
    <router-outlet name="outlet1"></router-outlet>
  </div>

  <div style="display: grid ;border: 1px solid green; width: 50%;height: 100px;float:left">
    <router-outlet name="outlet2"></router-outlet>
  </div>
</div>

I am unable to load

{ path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}

by clicking on :

<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button>

What am I doing wrong. I tried

<button [routerLink]="['/module1/mod1child2',{outlets: {'outlet2': ['childoutlet2']}}]">
   Change Outlet 2
 </button>`

but this doesn't seem to work as well

can you post ur code on www.stackblitz.com – Nuttertools May 24 '19 at 04:45 — Nuttertools, May 24 '19 at 04:45

score 2 · Accepted Answer · answered May 30 '19 at 10:19

I've encountered that bug 2 years ago.

There's a pull request that you should definitely 1) check out, 2) upvote with a thumbsup so it eventually gets merged https://github.com/angular/angular/pull/25483

I was so tired of that and didn't want to rename all the empty routes within my app in order to have that working so I ending up patching that fix from a postinstall hook after the npm modules have been fetched...

Far from ideal but it just works and hopefully it might be merged at some point!

Shady, but if you want to go this way too, check my comment on the PR https://github.com/angular/angular/pull/25483#issuecomment-495249672

score 1 · Answer 2 · answered May 24 '19 at 04:49

This is a known issue with aux route for quite a long time now with no time frame of fixing it https://github.com/angular/angular/issues/10726. Apparently it was fixed at one point but changes got reverted. Basically your parent path cannot be empty, you need to provide a path.

      {
        path: 'out2', <--- cannot be empty
        component: Outlet2Component,
        outlet: 'outlet2',
        children: [
            { path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}
        ],
      },

score 1 · Answer 3 · answered May 24 '19 at 06:07

The issue you have 2 empty path, though as @penleychan mentioned it as a bug and share the issue like, I don't consider it as a bug, rather, I feel you should give a parent path always rather than having empty string like ''. You can fix it by specifying the path in the parent level.

     {
        path: 'mod1child2',
        component: SubMod1Child2Component,
        children: [
          { path: '', component: Outlet1Component, outlet: 'outlet1' },
          { path: 'newout1', component: Outlet1NewComponent, outlet: 'outlet1' },
          {
            path: 'childoutlet2',
            component: Outlet2Component,
            outlet: 'outlet2',
            children: [
                { path: '', component: ChildOutlet2Component , outlet: 'outlet2'}
            ],
          },
        ],
      },

score 1 · Answer 4 · answered May 29 '19 at 13:18

Unfortunately, it is a know issue when using loadChildren for lazy loading. But it is easily fixable, you just need to provide always a name to your default route for every new route you define. In this case

{
    path: 'base',
    component: SubModule1Component,
    children: [
    ...
    ]
}

Accessing children in auxiliary routing : Angular

4 Answers4

Linked