title: Angular routing with multiple routes and router-outlet
body: <p>I'm trying to add navigation to components in addition to the navigation of the app root, but it is not navigating to component route.</p>
  
  <p>I'm using two router-outlet:</p>
  
  <ul>
  <li>router outlet for the app root (app.component.html)</li>
  <li>router outlet for users component (users.component.html)</li>
  </ul>
  
  <p>With two routes:</p>
  
  <ul>
  <li>route for the app (app.routing.module.ts)</li>
  <li>route for users (users.routing.module.ts)</li>
  </ul>
  
  <p>When navigating to "<strong>users</strong>" I can see <strong>users.component.html</strong> with two links, but when pressing on the link "<strong>list</strong>", it is not navigating to: <strong>UsersListComponent</strong> defined in <strong>users.routing.module.ts</strong></p>
  
  <p>I'm not sure if this is the correct way to do this.</p>
  
  <p>Below is folder structure of the project and source code:</p>
  
  <pre><code>-- app.routing.module.ts
  -- app.component.html
  -- components
     -- dashboard
     -- users
        -- users.component.html
        -- users.module.ts
        -- users.routing.module.ts
  </code></pre>
  
  <p><strong>app.routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { UsersModule } from './panels/users/users.module';
  
  const AppRouting: Routes = [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'users', loadChildren: () =&gt; UsersModule  }
      { path: '**', component: DashboardComponent }
  ];
  
  @NgModule({
      imports: [RouterModule.forRoot(AppRouting, { enableTracing: true })],
      exports: [RouterModule],
      providers: []
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div class="app-wrapper"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>users.component.html</strong></p>
  
  <pre><code>&lt;a [routerLinkActive]="['active']" [routerLink]="[{ outlets: { 'users':['list'] } }]" [skipLocationChange]="true"&gt;List&lt;/a&gt;&amp;nbsp;
  &lt;a [routerLinkActive]="['active']" [routerLink]="['create']" [skipLocationChange]="true"&gt;Create&lt;/a&gt;&amp;nbsp;
  &lt;router-outlet name="users"&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>users.routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
  import { CreateUserComponent } from './user-create/user-create.component';
  import { UsersListComponent } from './users-list/users-list.component';
  import { UsersComponent } from './users.component';
  
  const UsersRouting: Routes = [
       { path: 'list', component: UsersListComponent, outlet: 'users' },
       { path: 'create', component: CreateUserComponent, outlet: 'users' },
       { path: 'edit', component: CreateUserComponent, outlet: 'users' },
       { path: '', component: UsersComponent }
  ];
  
  @NgModule({
    imports: [
        RouterModule.forChild(UsersRouting)
    ],
    declarations: [],
    exports: [
        RouterModule
    ],
  })
  export class UsersRoutingModule {}
  </code></pre>
  
  <p><strong>users.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CreateUserComponent } from './user-create/user-create.component';
  import { UsersComponent } from './users.component';
  import { UsersListComponent } from './users-list/users-list.component';
  import { UsersRoutingModule } from './users.routing.module';
  
  @NgModule({
    imports: [
      UsersRoutingModule,
    ],
    declarations: [
      UsersComponent,
      UsersListComponent,
      CreateUserComponent
    ]
  })
  export class UsersModule { }
  </code></pre>
  
  <p>Thanks in advance</p>