Angular 16 Lazy Loading and Nested Child Routes Issue

Question

I'm trying to set up angular routing in lazyloading but the problem is that as soon as I have nested child routes, my routing system no longer works.

app-routing-module.ts :

export const rootRoutes: Routes = [
  {
    path: "",
    data: {
      title: "Dashboard"
    },
    loadChildren: () => import("./modules/dashboard/dashboard.module").then(m => m.DashboardModule)
  },
  {
    path: "user",
    data: {
      title: "Utilisateur",
    },
    loadChildren: () => import("./modules/user/user.module").then(m => m.UserModule)
  },
  {
    path: "groupUser",
    data: {
      title: "Groupe d'utilisateur"
    },
    loadChildren: () => import("./modules/group-user/group-user.module").then(m => m.GroupUserModule)
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(rootRoutes, { enableTracing: true })
  ]
})
export class AppRoutingModule {}

dashboard-routing-module.ts (routing for module Dashboard):

export const dashboardRoutes: Routes = [
  {
    path: "",
    title: "Dashboard",
    data: {
      title: "",
    },
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: '/dashboard'
      },
      {
        path: "dashboard",
        title: "Dashboard",
        component: HomeComponent,
        data: {
          title: "Home"
        },
        children: [
          {
            path: "group_host/:group_host_id",
            title: "Groupe Host",
            component: GroupHostDetailComponent,
            data: {
              title: "Groupe Host"
            }
          }
        ]
      }
    ]
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(dashboardRoutes)
  ],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

Link stackblitz : https://stackblitz.com/edit/stackblitz-starters-tznewx?file=package.json

I'm trying to access the GroupHostDetailComponent via the following url: dashboard/group_host/1. But every time I call this url, it calls me the HomeComponent view

Thank you in advance for any help you can give me.

Answer 1

You need to add <router-outlet></router-outlet> inside the parent component here it's home.component.html

working stackblitz