Angular 14 - Routing Module Issue - Invalid configuration of route

Question

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?

Answer 1

I think this might have something to do with the breaking change below. source

PR #45176

The type of Route.pathMatch is now more strict. Places that use pathMatch will likely need to be updated to have an explicit Route/Routes type so that TypeScript does not infer the type as string.

I would give this below a try to see if it resolve your issue:

export const routes: Routes = [
  {
    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]
  },
  {
    path: '',
    redirectTo: '/homepage',
    pathMatch: 'full',
  }