CODEWITHSUNDEEP
angulartypescriptangular-routerangular14angular14upgrade
John Mentosana
John Mentosana

Reputation: 43

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?

Upvotes: 4

Views: 9023

Answers (3)

Jason Spence
Jason Spence

Reputation: 564

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,
    }
]

Upvotes: 0

bnGG
bnGG

Reputation: 371

Please check the routes of src/app/homepage/homepage-component/homepage.module or post the code here.

I am pretty sure you have invalid routes there.

Upvotes: 0

Wen W
Wen W

Reputation: 2647

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',
  }

Upvotes: 4

Related Questions