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.

I'm using two router-outlet:

* router outlet for the app root (app.component.html)
* router outlet for users component (users.component.html)

With two routes:

* route for the app (app.routing.module.ts)
* route for users (users.routing.module.ts)

When navigating to "**users**" I can see **users.component.html** with two links, but when pressing on the link "**list**", it is not navigating to: **UsersListComponent** defined in **users.routing.module.ts**

I'm not sure if this is the correct way to do this.

Below is folder structure of the project and source code:

```
-- app.routing.module.ts
-- app.component.html
-- components
   -- dashboard
   -- users
      -- users.component.html
      -- users.module.ts
      -- users.routing.module.ts

```

**app.routing.module.ts**

```
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: () => UsersModule  }
    { path: '**', component: DashboardComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(AppRouting, { enableTracing: true })],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule { }

```

**app.component.html**

```
<div class="app-wrapper">
    <router-outlet></router-outlet>
</div>

```

**users.component.html**

```
<a [routerLinkActive]="['active']" [routerLink]="[{ outlets: { 'users':['list'] } }]" [skipLocationChange]="true">List</a>&nbsp;
<a [routerLinkActive]="['active']" [routerLink]="['create']" [skipLocationChange]="true">Create</a>&nbsp;
<router-outlet name="users"></router-outlet>

```

**users.routing.module.ts**

```
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 {}

```

**users.module.ts**

```
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 { }

```

Thanks in advance