Component not loaded into router-outlet

Question

When

<router-outlet (activate)="onActivate($event)"></router-outlet>

and

<router-outlet name="buildingDetails"></router-outlet>

are in the same template app.component.html, a click on Building Details Button will load BuildingDetailsComponent into the buildingDetails router-outlet.

But when comment out buildingDetails router-outlet in app.component.html and comment in buildingDetails router-outlet in sidenavigation.component.html, BuildingDetailsComponent will not be loaded into buildingDetails router-outlet on Building Details Button Click anymore.

app.component.html:

<router-outlet (activate)="onActivate($event)"></router-outlet>
<router-outlet name="buildingDetails"></router-outlet>

sidenavigation.component.html:

<p>
  sidenavigation works!
</p>
<button (click)="openBuildingDetails()">
  Building Details
</button>
<hr>
<!--<router-outlet name="buildingDetails"></router-outlet>--> when moving the router outlet here, loading BuildingDetails Component on openBuildingDetails() button click is not working anymore

sidenavigation.component.ts:

public openBuildingDetails() { this.router.navigate([{ outlets: { buildingDetails: "feature-component" } }]); }

app-routing-module:

const appRoutes: Routes = [
{
    path: "",
    component: SidenavigationComponent,
    pathMatch: "full"
},
{
    path: "feature-component",
    loadChildren: "./modules/building/building.module#BuildingModule",
    outlet: "buildingDetails"
}];

@NgModule({
imports: [
    CommonModule,
    RouterModule.forRoot(
        appRoutes,
        {
            enableTracing: true
        }
    )
],
exports: [
    RouterModule
]})

building-routing-module:

const routes: Routes = [
{
    path: "",
    component: BuildingDetailsComponent
}];

@NgModule({
imports: [
    RouterModule.forChild(routes)
],
exports: [
    RouterModule
]})

Does anybody know why and how this can be solved?

I added a code example for each case. The only difference between both examples is the location of the named router-outlet. The first one is working (named router-outlet is in app.component.html). The second one is not working (named router-outlet is in sidenavigation.html).

Desired Behavior: BuildingDetails Component should also be loaded when the named router-outlet is in a different location than the first unnamed router-outlet.

Problem: When moving the named router-outlet into a different template than the unnamed router-outlet, BuildingDetails Component is not loading anymore on openBuildingDetails() button click.

Working: https://stackblitz.com/github/stonedraider/router-outlets

Not working: https://stackblitz.com/github/stonedraider/not-working-router-outlets

Answer 1

You have to add side navigation selector in app.component.html as below and remove parent router-outlet because of parent router-outlet conflicts while loading component.

<app-sidenavigation></app-sidenavigation>

and now the side navigation component loads building component.

Either refer below answer link to load children with lazy load:

Link