Angular 14 - Routing Module Issue - Invalid configuration of route

I'm having an issue with angular routing after I've upgraded from Angular 13 to Angular 14. I'm getting the following error :

*Uncaught Error: Uncaught (in promise): Error: NG04014: Invalid configuration of route 'homepage/'. One of the following must be provided: component, loadComponent, redirectTo, children or loadChildren*

App.routing.ts

export const routes: Routes = [
  { path: '', redirectTo: 'homepage', pathMatch: 'full'},
  {
    path: 'homepage',
    loadChildren: () =>
      import('src/app/homepage/homepage-component/homepage.module').then(m => m.HomepageModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'sales',
    loadChildren: () =>
      import('src/app/reports/sales-component/sales.module').then(m => m.HomepageModule),
    canActivate: [AuthGuard]
  },

I've tried adding component, load component etc to the routes as the error is saying but loadchildren won't work as intended. Am I using loadChildren wrong?

This is what worked for my navigating situation after updating my Angular version from v13 to v14.

App Module

export const APP_ROUTES: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            {
                path: 'settings',
                loadChildren: () => import('./features/settings/settings.module').then(m => m.SettingsModule),
            }
        ]
    }
]

Settings Module

export const SETTINGS_ROUTES: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'list-defaults',
    },
    {
        path: 'list-defaults',
        component: ListDefaultsComponent,
    }
]