title: Child Routing for Angular 5 not working properly
body: <p>Hello I am trying to use child routing, but it does not work as intended.</p>
  
  <p>My angular 5 structure:</p>
  
  <p>In this scenario, the top-nav contains links to load submodules and sub-nav has links to update the submodule's contents.</p>
  
  <p>The app module (and app component) contains a top navbar to navigate to different submodules and the app component template could look like this</p>
  
  <pre><code> &lt;top-navbar&gt;&lt;/top-navbar&gt;
   &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>But here is the complexity. I need my submodules to have similar layout with a second level nav bar and their own router outlet to load their own components.</p>
  
  <pre><code> &lt;sub-navbar&gt;&lt;/sub-navbar&gt;
   &lt;router-outlet name='sub'&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>My app.module.ts </p>
  
  <pre><code>RouterModule.forRoot([
    {
      path: 'career', component: CareerComponent,
      children: [
        { path: 'roles', component: rolesComponent, outlet: 'sub' }
      ]
    }
  ])
  </code></pre>
  
  <p>My HTML file, I am using the following format on my nav buttons:</p>
  
  <pre><code>[routerLink]="[{ outlets: { sub: ['roles'] } }]"
  </code></pre>
  
  <p>I also have tried the following (this does nothing, I click on Roles button and nothing happens):</p>
  
  <pre><code>[routerLink]="['/roles']"
  </code></pre>
  
  <p>On top menu I click on Career from the nav. 
  Now my url shows as mywebsite.com/career</p>
  
  <p>now from here I have a career page with my side menu, one of the button is Roles. This should change the partial view of the page.
  The component is loaded right, the problem is that the url format is wrong. </p>
  
  <p>Expected URL:</p>
  
  <pre><code> mywebsite.com/career/roles
  </code></pre>
  
  <p>How it displays(WRONG) : </p>
  
  <pre><code> mywebsite.com/career/(sub:roles)
  </code></pre>