Angular auxiliary routing not working from within modules

Question

I'd like to use Angular auxiliary routing for a (very large) administration tool side menus (using 7.2.X Angular branch). After several days of tests with the awfully-complex Angular router, I could make the URL work properly. But when I try to route between components in the auxiliary outlets, I have very strange behaviors...

The app sketches I got from the designers is pretty standard : one general fixed menu in the upper part, a dynamic side menu on the left, and a second dynamic side menu on the right.

My app-routing module is currently something like :

const appRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'person', component: MainComponent, loadChildren: 'app/person/person.module#PersonModule'},
  // several other modules, some eager loaded, other lazy loaded
  {path: '**', redirectTo: '/login'}
];

The MainComponent contains the primary and named router outlets for the different modules :

<div class="main-container">
  <div class="left-container">
    <router-outlet name="left"></router-outlet>
  </div>
  <div class="middle-container">
    <router-outlet></router-outlet>
  </div>
  <div class="right-container">
    <router-outlet name="right"></router-outlet>
  </div>
</div>

And the person module routing :

const PERSON_ROUTES: Routes = [
  {path: 'display', component: PersonDisplayComponent},
  {path: 'first', component: MenuTestFirstComponent, outlet: 'right'},
  {path: 'second', component: MenuTestSecondComponent, outlet: 'right'},
  {path: 'third', component: MenuTestThirdComponent, outlet: 'right'},
  {path: '', component: MenuTestFirstComponent, outlet: 'right'},
  {path: '' pathMatch: 'full', redirectTo: 'display'},
];

All these routes are working properly (the two first do display the same thing due to the default auxiliary route) :

/person/display
/person/(display//right:first)
/person/(display//right:second)
/person/(display//right:third)

Now, to the problems ! I need to route between these menus (first have a link to route on second, and second have a link to route to third). The code I placed in menus components are the following (here is first, but similar in second to route to third) :

<p><a [routerLink]="[{outlets:{right:['second']}}]">Second (routerLink)</a></p>
<p><a (click)="routeToSecond()">Second (route.navigate)</a></p>

And in the TS :

public routeToSecond(){
  this.router.navigate([
    {
      outlets: {
        right: ['second'],
      }
    }
  ]);
}

The problem is, when I'm on /person/display, the first menu (which is the default) is properly displaying. The routerLink way of routing is properly adding a link to /person/(display//right:second). However, the (clic) way of routing is going to a router error :

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'second'
Error: Cannot match any routes. URL Segment: 'second'

The route I asked to routerLink and to router.navigate is strictly the same, but one way of routing is up to this point working, the latter is not.

A second problem is, when I'm on /person/(display//right:second), none of the link to third are working. The link generated by routerLink is strange :

/person/(display//right:second/(right:third))

I would expect the routerLink to replace the right:second part for right:third rather than add a part to the auxiliary URL.

Concerning the router.navigate routing, I get a similar error :

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'third'
Error: Cannot match any routes. URL Segment: 'third'

Most of the examples of auxiliary routing I found by googling have major differences with my use case. They are either much too simple (usually with only one AppModule), or the routing links to auxiliary outlets are outside of the modules (in components of the AppModule).

In my case, actions in side menus can change the content of the menus, not only the top level static menu.

I prepared a stackblitz example as simple as I could to reproduce what I'm describing.

I may have missed some major information about auxiliary routing (or more generally about Angular router and routing, this is not easy at all). If you have any idea to solve my routing problem, that would be awesome. Feel free to clone my stackblitz example to show a working example. Refactor as much as you want if you need to change the module and/or component structure. Auxiliary routing in complex situation really lack detailed documentation, so if your answer can contain some sort of explanation, that would be even more awesome.

Thank you to all of you who read up to this point :-)

Angular auxiliary routing not working from within modules

0 Answers0