title: Angular 4 auxiliary route not working as expected
body: <p>I have an application  where I have one login component and a home module. I want to have an aux route inside the home module.</p>
  
  <p>As soon as the user logs in I am redirecting to the home route.</p>
  
  <p>This is my app-routing.module</p>
  
  <pre><code>const routes: Routes = [
    {
      path: 'login',
      component: LoginComponent
    },
    {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    }
  ];
  
  @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>Below is my home-routing.module.ts</p>
  
  <pre><code>const routes: Routes = [
      {
          path: 'home',
          children: [
              {
                  path: '',
                  component: HomeComponent,
                  canActivate: [CanActivateGuard]
              },
              {
                  path: '',
                  outlet: 'aux',
                  component: DashboardComponent,
                  canActivate: [CanActivateGuard]
              }
          ]
      }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class HomeRoutingModule { }
  </code></pre>
  
  <p>My expectation is that when the app is redirected to the home route <code>this.router.navigate(['/home']);</code> then both HomeComponent should be rendered (which is rendering right now) and DashboardComponent should be rendered (which is not rendering)</p>
  
  <p>I tried all sort of hacks like providing a path to the component which need to be rendered inside aux route to 'dashboard' and from home component's ngOnInit method trying to redirect to the dashboard route <code>this.router.navigate([{ outlets: { aux: 'dashboard' }}]);</code></p>
  
  <p>But noting seems to work.
  What is it that I am doing wrong?</p>