CLOSED - RouterLink doesn't work properly to show user detail - Angular 8

Question

I am doing an app and I am having an issue to show the user detail. I think I have added correctly all steps about router but for any unknown reason it is not working.

The idea is that I have a menu with an option that is "Users" which content is a table with the users list. In the id column of the table I have a link with the id of the user and when I click in this link it should go to the user's detail. The url is taking the params fine(localhost:4200/users/{id_of_user}) but the content is not loaded.

Here is my code:

app.module.ts

const routes: Routes = [
  { path: '', component: SidebarLayoutComponent,
    children: [
      { xxx },
      { path: 'users', component: UserListComponent, canActivate: [AuthGuard],
          children: [
            { path: ':id', component: UserAccountDetailComponent, canActivate: [AuthGuard] }
          ]
      },
    ]
  },
];

@NgModule({
   .
   .
   .
   imports: [
      RouterModule.forRoot(routes)
   ],
})
export class AppModule { }

user-list.component.ts

<table class="user-list" mat-table [dataSource]="userListDataSource">
   .
   .
   .
   <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>id</th>
         <td mat-cell *matCellDef="let user">
            <a [routerLink]="['/users', user.id]">
               {{ user.id }}
            </a>
         </td>
   </ng-container>
</table>

user-account-detail.component.ts

export class UserAccountDetailComponent implements OnInit {
   .
   .
   .
   constructor(
       private route: ActivatedRoute
   ) {
    let userId;
    this.route.paramMap.subscribe((params: Params) => {
      userId = +params.get('id');
    });
   .
   .
   .
}

sidebar-menu.component.html

<ul id="main-menu">
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <a routerLink="/users">Users</a>
    </li>
</ul>

Could anybody help me please?

Thank you in advance.

Answer 1

@c_ogoo, @Eldar I found the solution. Thank you so much for your interest and help.

The solution is as follow:

app.module.ts

const routes: Routes = [
  { path: '', component: SidebarLayoutComponent,
    children: [
      { xxx },
      { path: 'merchants/:id', component: MerchantAccountDetailComponent, canActivate: [AuthGuard] },
      { path: 'merchants', component: MerchantListComponent, canActivate: [AuthGuard] },
    ]
  },
];

@NgModule({
   .
   .
   .
   imports: [
      RouterModule.forRoot(routes)
   ],
})
export class AppModule { }

sidebar-menu.component.ts

<ul id="main-menu">
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/users">Users</a>
    </li>
</ul>