title: Angular 4 / 5 - Navigation to named route occurs only to the first children route declared
body: <p>Hello fellow Angular coders,</p>
  
  <p>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).</p>
  
  <ol>
  <li><p>Initial Navigation URL: Navigates to <strong>ActiveDealComponent</strong>, renders the menu and the named router-outlet also renders the "dashboard" component.</p>
  
  <p>URL: <a href="http://localhost:4200/deal/123456/(dealOutlet::dashboard)" rel="nofollow noreferrer">http://localhost:4200/deal/123456/(dealOutlet::dashboard)</a> which is invoked by the following code (sits inside an anchor tag):</p>
  
  <p>[routerLink]="['/deal', this.dealId, { outlets: { dealOutlet : [ ':dashboard'] } }]"</p></li>
  <li><p>Subsequent Navigation Attempts: The named route changes but the named router-outlet does not display the new desired component (dashboard remains).</p>
  
  <p><a href="http://localhost:4200/deal/123456/(dealOutlet::assets)" rel="nofollow noreferrer">http://localhost:4200/deal/123456/(dealOutlet::assets)</a> which is invoked by the following code (sits inside an anchor tag):</p>
  
  <p>[routerLink]="['/deal', this.dealId, { outlets: { dealOutlet : [ ':assets' ] } }]"</p></li>
  </ol>
  
  <p><strong>deal.module.ts</strong></p>
  
  <pre><code>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'
        }
      ]
    }
  </code></pre>
  
  <p><strong>active-deal.component.html</strong></p>
  
  <pre><code>&lt;div *ngIf="dealId"&gt;
    &lt;app-deal-nav-menu [active-deal]="dealId"&gt;
    &lt;/app-deal-nav-menu&gt;
  &lt;/div&gt;
  
  &lt;div class="all-deals"&gt;
    &lt;div class="container body-content"&gt;
      &lt;router-outlet name="dealOutlet"&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>NOTE</strong>: If I change the children declaration order, let's say ":assets" first and then  ":dashboard:, then assets gets rendered but dashboard does not.</p>
  
  <p>What am I missing here? </p>
  
  <p>Thanks in advance.</p>