How to use named router outlet from within submodule

Question

I have an app component html as below, which has two router outlets, one primary and other auxiliary with name. I want most of my routes to fall under primary router outlet, which will display content with side menu component and I have few routes that shouldn't display side menu component. So, that should go under named router outlet.

app.component.html

<div class="container-fluid p-0">
    <header-component></header-component>
    <navbar-component></navbar-component>
    <banner-component></banner-component>
    <router-outlet></router-outlet> <!-- primary -->
    <router-outlet name="no-side"></router-outlet> <!-- secondary -->
    <footer-component></footer-component>
</div>

app.routing.module.ts

const routes: Routes = [
    { path: '', redirectTo: '', pathMatch: 'full' },
    { path: '**', component: NotFoundPageComponent }
];

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

App routing module has sub module as page module, which defines its routes and based on the route it displays in primary router outlet.

page.component.html

    <div class="container-fluid">
        <div class="row">
                <div class="col-lg-9 col-md-12 col-sm-12">
                    <router-outlet></router-outlet>
                </div>
                <div class="col-lg-3 col-md-12 col-sm-12 border-start">
                    <side-menu-component></side-menu-component>
                </div>
        </div>
    </div>

Page routing module also defines child modules like admin module.

page.routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: PagesComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            {
                path: 'home',
                component: HomeComponent
            },
            {
                path: 'admin',
                loadChildren: () => import('./admin/admin.module').then((m) => 
                m.AdminModule)
            }
        ]
   }
];

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

Admin routing module has its route defined. In one of the route of the admin, I want to load it under the second outlet. But, when I give the outlet name and try to route, it display 404 not found without an errors in console.

admin.routing.module.ts

const routes: Routes = [
    {
        path: 'page1',
        component: Page1Component,
        outlet: 'no-side'
    }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AdminRoutingModule {}

How to resolve this? Are there any better solution to handle my case

How to use named router outlet from within submodule

0 Answers0