angularangular-routingangular-auxiliary-routes

Accessing children in auxiliary routing : Angular

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:

enter image description here

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

Solution

  • 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