Lazy loading angular 17 not loading the child routes

Question

i am trying to implement lazy loading on admin interface. In app-routing.module file i am using the below syntax

{
    path: 'admin',
    loadChildren: () => import('@/admin/admin.module').then(m => m.AdminModule),
  },

and in admin-routing.module file the syntax is

{
    path: '',
    component: MainComponent,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'profile',
        component: ProfileComponent,
      },
      {
        path: 'general',
        component: GeneralComponent,
      },
      {
        path: 'events',
        component: EventsComponent,
      },
      {
        path: 'members',
        component: MembersComponent,
      },
      {
        path: 'donation',
        component: DonationComponent,
      },
      {
        path: 'donors',
        component: DonorsComponent,
      },
      {
        path: 'rules-regulations',
        component: RulesRegulationsComponent,
      },
      {
        path: 'gallery',
        component: GalleryComponent,
      },
      {
        path: '',
        component: GeneralComponent,
      },
    ],
  },

The issue is admin mainComponent loads correctly but the child routes admin/gallary, admin/event, etc redirects to homepage and i am getting K.noMatchError error. Please help me guys.

I want that admin/gallary, admin/event etc routes work properly.

Answer 1

{
  path: 'admin',
  loadChildren: () => import('@/admin/admin.module').then(m => m.AdminModule),
},




{
  path: '', // This route is now a child of the main route
  component: MainComponent,
  canActivate: [AuthGuard],
  canActivateChild: [AuthGuard],
  children: [
    // ... other child routes
    {
      path: 'admin/gallery', // Prefixed with 'admin/'
      component: GalleryComponent,
    },
    {
      path: 'admin/events', // Prefixed with 'admin/'
      component: EventsComponent,
    },
    // ... other admin child routes
  ],
},

Answer 2

Thanks everyone for your help. I have resolved the issue. Actually, i am importing BrowserAnimationModule in lazy loaded component, but it should only be included in the root module.