Named router and nested routes in angular 6 - angular-routing

Question

Can someone please assist in navigating to a specific route. I've been sitting with this for hours now. Here's what I have:
const routes: Routes = [
{
path: '', redirectTo: 'home', pathMatch: 'full'
},
{
path: 'home',
component: MainlayoutComponent,
canActivate: [AuthenticatedGuard],
children: [
{ path: 'listmanagement', component: ListmanagementComponent, outlet: 'main' },
{
path: 'buildings', component: BuildingslistComponent, outlet: 'main',
children: [
{ path: '', redirectTo: 'buildings', pathMatch: 'full' },
{ path: 'building', component: BuildingdetailComponent },
{ path: 'building/:code', component: BuildingdetailComponent }
]
},
{
path: 'calendarandrates', component: CalendarandratesComponent, outlet: 'main',
children: [
{ path: '', redirectTo: 'calendarandrates', pathMatch: 'full' },
{ path: 'rescalendar', component: RescalendarlistComponent },
{ path: 'roomrates', component: ResratesmainComponent },
]
},
{ path: 'users', component: UsersComponent, outlet: 'main' },
]
},
{
path: 'login',
component: LoginlayoutComponent,
children: [
{ path: '', component: LoginComponent, outlet: 'login' },
]
},
{
path: '**',
component: NotfoundComponent,
canActivate: [AuthenticatedGuard],
outlet: 'main'
}
];
Then in my app.component I only have the primary router outlet:
<router-outlet></router-outlet>
This router outlet is suppose to load only one of the two layout components, maned loginlayout.component and mainlayout.component: One for when a user is not logged in (so as not to show the side nav and other toolbar items, this layout component only has a simple logo on the top left and header in the middle), and other layout component has side nav and more items on the toolbar. All this is working fine and I'm able to log in using the first layout and load the 2nd layout. The outlet routers in the respective layout pages are:
<router-outlet name="login"></router-outlet>
<router-outlet name="main"></router-outlet>
Somehow, once in the main layout component, I can navigate to the 1st level child (buildings, for example) using something like:
this.router.navigate(['/home', { outlets: { main: ['buildings'] } }])
I cannot seem to figure out how I can navigate to the 2nd later child (for example, once in the buildings component, I want to navigate to the (single) building item by clicking an edit (with param) or add (without param) new button
I've search and I only get examples with only one level child, but not 2 levels as I have in this example. Any help would be appreciated.

Answer 1

I fixed my issue and just carried on with the development. Now that I'm done, I thought I should just post my fix. I changed the routes to look like this:
const routes: Routes = [
/*==================================Main Outlet==================================*/
{
path: '', redirectTo: 'home', pathMatch: 'full'
},
{
path: 'home', component: MainlayoutComponent, canActivate: [AuthGuard],
children: [
{ path: '', component: HomeComponent, outlet: 'main' },
{ path: 'listmanagement', component: ListmanagementComponent, outlet: 'main' },
{ path: 'buildings', component: BuildingslistComponent, outlet: 'main' },
{ path: 'buildings/building/:code', component: BuildingdetailComponent, outlet: 'main' },
{ path: 'buildings/building', component: BuildingdetailComponent, outlet: 'main' },
{ path: 'buildings/allbedspaces', component: BedspacelistComponent, outlet: 'main' },
{ path: 'calendarandrates', component: CalendarandratesComponent, outlet: 'main' },
{ path: 'calendarandrates/rescalendar', component: RescalendarlistComponent, outlet: 'main' },
{ path: 'calendarandrates/roomrates', component: ResratesmainComponent, outlet: 'main' },
{ path: 'users', component: UsersComponent, outlet: 'main' },
{ path: 'users/myaccount', component: MyaccountComponent, outlet: 'main' },
{ path: '**', component: NotfoundComponent, canActivate: [AuthGuard], outlet: 'main' }
]
},
/*==================================Login Outlet==================================*/
{
path: 'login', component: LoginlayoutComponent,
children: [{ path: '', component: LoginComponent, outlet: 'login' } ]
}
];
Then when navigating to a route I just use the following code:
this.router.navigate(['/home', { outlets: { main: ['buildings', 'allbedspaces'] } }], { skipLocationChange: true })
skipLocationChange: true because I skip all my location changes when routing and always keep the base url since I do not want users to navigate through the app using the address bar