Angular 17 Named Router Outlet within Layout Component

Issue

My Application has some generic pages like the landing or logout page which are navigatable when the user is not logged in. Those shall be rendered normally within the primary router-outlet. Then I have Pages that are for logged-in users as the core of the application state and those pages shall be rendered within a general layout component that contains the navigation, footer, header etc. I am having trouble to render those children within a named router-outlet that I expect to be within my layout component.

app.routes.ts

export const routes: Routes = [
{ path: '', redirectTo: 'landing', pathMatch: 'full' },
{
    path: 'landing',
    component: LandingPageComponent
},
{
    path: 'intern',
    component: NavigationComponent,
    children: [
        {
            path: 'enterprise',
            component: OverviewComponent,
        },
        { path: '', redirectTo: 'enterprise', pathMatch: 'full' },
    ]
},

];

navigation.component.html

<header></header>
<router-outlet name="intern"></router-outlet>
<footer></footer>

Landing and Navigation component are rendered as expected, but the content of the pages that I want to be within the navigation component in the named router-outled "intern" are not there. Sidenote: As I understood - as long as the child route and the named router-outlet share the same name (here 'intern'), i do not need to define the "outled: 'intern'" property in the app.routes.ts

Solution

For your requirement you do not need named router outlets, you need to use it, when you need to render other components in router outlet, apart from the primary router-outlet, which is not the case in your requirement, so you can achieve with normal routing itself, please find below working example where it works fine!

When I removed the name property of router-outlet then it started working!

angular documentation for named outlets

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { NavigationComponent } from './navigation/navigation.component';
import { OverviewComponent } from './overview/overview.component';
import { Routes, provideRouter, RouterModule } from '@angular/router';
import 'zone.js';

export const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  {
    path: 'landing',
    component: LandingPageComponent,
  },
  {
    path: 'intern',
    component: NavigationComponent,
    children: [
      {
        path: 'enterprise',
        component: OverviewComponent,
      },
      { path: '', redirectTo: 'enterprise', pathMatch: 'full' },
    ],
  },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <router-outlet></router-outlet>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [provideRouter(routes)],
});

stackblitz

Answered By - Naren Murali