Angular load child module in child routing

Question

I have below routing module as parent.

const routes: Routes = [
  {
    path: '',
    component: BaseRoutingComponent,
    canActivate: [AuthGuardService],
    data: {
      expectedRoles: ["superadmin", "admin", "office", "fieldrep", "salesperson"]
    },
    children: [
      {
        path: '',
        component: AdminDashboardComponent,
        canActivate: [AuthGuardService],
        data: {
          expectedRoles: ["superadmin", "admin", "office", "fieldrep", "salesperson"]
        }
      },
      {
        path: 'upload-tools',
        loadChildren: () => import('././modules/uploads/uploads.module').then(m =>
          m.UploadsModule),
        data: { 'preload': true }
      },
      {
        path: 'abc/:id',
        component: AbcComponent,
        canActivate: [AuthGuardService],
        data: {
          expectedRoles: ["superadmin", "admin"]
        },
        children: [
          {
            path: '',
            pathMatch: 'full',
            loadChildren: () => import('./modules/bcd.module').then(m =>
              m.BcdModule),
          }
        ]
      },
   }]

And below routing as child

routes =   [{
    path: 'kkk',
    component: KKKComponent,
    canActivate: [AuthGuardService],
    data: {
      expectedRoles: ["superadmin", "admin"]
    },
    {
    path: 'nnn',
    component: NNNComponent,
    canActivate: [AuthGuardService],
    data: {
      expectedRoles: ["superadmin", "admin"]
    }]

but below path is not found : abc/1/kkk -> KKKComponent abc/1/nnn -> NNNComponent

If i added anything in child path (ex. path: 'kb') then its accessible. but i want path: '' . So how can i achieve this?

Answer 1

Your child route must be empty, but you may add any children. But here, the issue is that in your parent, the lazy route is empty. So it will actually load whenever the 'abc/:id' is matched. So it is actually attached to the lazy module. So you could actually put that component in the child.

This is the child routing:

  {
    path: '',
    // AuthGuardService guard already executed on parent route
    children: [
      {
        path: '',
        component: AbcComponent,
        pathMatch: 'full',
        data: {
          expectedRoles: ["superadmin", "admin"]
        }
      },
      {
        path: 'kkk',
        component: KKKComponent,
        data: {
          expectedRoles: ["superadmin", "admin"]
        }
      },
      {
        path: 'nnnn',
        component: NNNComponent,
        data: {
          expectedRoles: ["superadmin", "admin"]
        }
      }]
  }

And rewrite the parent route (erases and replaces the whole content of your question, not just part of it):

const routes: Routes = [
  {
    path: '',
    component: BaseRoutingComponent,
    canActivate: [AuthGuardService],
    data: {
      expectedRoles: ["superadmin", "admin", "office", "fieldrep", "salesperson"]
    },
    children: [
      {
        path: '',
        component: AdminDashboardComponent,
        canActivate: [AuthGuardService],
        data: {
          expectedRoles: ["superadmin", "admin", "office", "fieldrep", "salesperson"]
        }
      },
      {
        path: 'upload-tools',
        loadChildren: () => import('././modules/uploads/uploads.module').then(m =>
          m.UploadsModule),
        data: { 'preload': true }
      },
      {
        path: 'abc/:id',
        canActivate: [AuthGuardService],
        loadChildren: () => import('./modules/bcd.module').then(m =>
          m.BcdModule),
      }
   }]