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?

Just want to confirm, it was working in Angular 13 and STOPPED working once you upgraded to 14? — Wen W, Sep 14 '22 at 14:44
Hi @WenW tx for your reply. Yes.. it was working in Angular 13. — John Mentosana, Sep 14 '22 at 14:57

Wen W · Answer 1 · 2022-09-14T15:29:31.747

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

score 0 · Answer 2 · answered Mar 02 '23 at 10:43

0

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.

answered Mar 02 '23 at 10:43

bnGG

191
3
9

score 0 · Accepted Answer · answered May 09 '23 at 15:28

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

Angular 14 - Routing Module Issue - Invalid configuration of route

3 Answers3