Angular 4 / 5 - Navigation to named route occurs only to the first children route declared

Question

Hello fellow Angular coders,

Inside my application, I have a module that renders a "container" component, which in turn has a Menu component and a named router-outlet (the idea here is to have a sub-navigation menu and page). Once I first navigate to the "container" route, navigation occurs and the named router-outlet displays correctly the first children route specified in the children[ ]. However, when I try to navigate to another "child" route, navigation does not occur - but the URL address does change - No errors are thrown (clean console).

1. Initial Navigation URL: Navigates to ActiveDealComponent, renders the menu and the named router-outlet also renders the "dashboard" component.

   URL: http://localhost:4200/deal/123456/(dealOutlet::dashboard) which is invoked by the following code (sits inside an anchor tag):

   [routerLink]="['/deal', this.dealId, { outlets: { dealOutlet : [ ':dashboard'] } }]"

2. Subsequent Navigation Attempts: The named route changes but the named router-outlet does not display the new desired component (dashboard remains).

   http://localhost:4200/deal/123456/(dealOutlet::assets) which is invoked by the following code (sits inside an anchor tag):

   [routerLink]="['/deal', this.dealId, { outlets: { dealOutlet : [ ':assets' ] } }]"

deal.module.ts

RouterModule.forChild([
   {
    path: 'deal/:dealId',
    component: ActiveDealComponent (this is the "container" component),
    canActivate: [PageGuard],
    children: [
      {
        path: ':dashboard',
        component: DealoverviewComponent,
        canActivate: [PageGuard],
        outlet: 'dealOutlet'
      },
      {
        path: ':assets',
        component: AssetsComponent,
        canActivate: [PageGuard],
        outlet: 'dealOutlet'
      }
    ]
  }

active-deal.component.html

<div *ngIf="dealId">
  <app-deal-nav-menu [active-deal]="dealId">
  </app-deal-nav-menu>
</div>

<div class="all-deals">
  <div class="container body-content">
    <router-outlet name="dealOutlet"></router-outlet>
  </div>
</div>

NOTE: If I change the children declaration order, let's say ":assets" first and then ":dashboard:, then assets gets rendered but dashboard does not.

What am I missing here?

Thanks in advance.

Answer 1

In the end, the colon ":" in the "children: array was the root cause of the issue.