Angular 6 - issue with nested routes - angular6

Question

I'm trying to setup up nested routes for an admin parent menu. Below admin I have two child routes - Security Settings and Configuration.
When I click on the Configuration menu item, my page is redirected to AdminComponent and renders Admin works. However, if I click on Site Configuration, it does NOT redirect to my SiteConfigComponent as I expect it to; it just redirects to AdminComponent again.
i.e. Here's the siteconfig route snippet which is also shown again below.
<a mat-button routerLink="/admin/siteconfig">
Site Configuration
</a>
HTML:
<a mat-button routerLink="/home" routerLinkActive="horizontal-active-link" [routerLinkActiveOptions]="{exact:true}">Home</a>
<a mat-button routerLink="/preferences" routerLinkActive="horizontal-active-link" [routerLinkActiveOptions]="{exact:true}">Preferences</a>
<a mat-button [matMenuTriggerFor]="appMenu">Admin
<mat-icon class="caret">arrow_drop_down</mat-icon>
</a>
<mat-menu #appMenu="matMenu" [overlapTrigger]="false" class="mega-menu app-dropdown">
<div fxLayout="column wrap">
<div fxFlex class="p-1">
<a mat-menu-item routerLink="/admin" routerLinkActive="horizontal-active-link" [routerLinkActiveOptions]="{exact:true}">
<b>Configuration</b>
</a>
<mat-divider></mat-divider>
<button mat-menu-item>Security Settings</button>
<a mat-button routerLink="/admin/siteconfig" routerLinkActive="horizontal-active-link">
Site Configuration
</a>
</div>
</div>
</mat-menu>
export const routes: Routes = [
{
path: '',
component: PagesComponent, children: [
{ path: '', component:HomeComponent, canActivate: [AuthGuard]},
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
{ path: 'admin', component: AdminComponent,
children: [
{ path: '', component: AdminComponent },
{ path: 'management/users', component: UsersManagementComponent, canActivate: [AuthGuard] },
{ path: 'management/roles', component: RolesManagementComponent, canActivate: [AuthGuard] },
{ path: 'siteconfig', component: SiteConfigComponent, canActivate: [AuthGuard]}
],
canLoad: [AuthGuard]
}
]
},
{ path: 'login', component: LoginComponent},
{ path: '**', component: NotFoundComponent }
];
And app.component.html (loaded by index.html) is :
<div id="app" class="100h app" [ngClass]="appSession.settings.Theme">
<router-outlet></router-outlet>
</div>
Again, if I click on Site Config it should go to the SiteConfigComonent.
Advice appreciated...