Angular 7 routes concat results in compile error

Question

First - FYI, the routing module is set to:

@NgModule({
  imports: [RouterModule.forRoot(ALL_ROUTES)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule {}

Placing all routes in 1 array named: 'ALL_ROUTES' and passing the array to the AppRoutingModule - imports: [RouterModule.forRoot(ALL_ROUTES)], works fine:

export const ALL_ROUTES: Routes = [
  {path: 'route1', component: FirstComponent},
  {path: 'route2', component: SecondComponent},
  {path: 'route3', component: ThirdComponent},
  {path: 'route4', component: FourthComponent}
];

So, the above code works fine. However, if we have 2 arrays and concat them like this:

export const ROUTES1: Routes = [
  {path: 'route1', component: FirstComponent},
  {path: 'route2', component: SecondComponent}
];

export const ROUTES2: Routes = [
  {path: 'route3', component: ThirdComponent},
  {path: 'route4', component: FourthComponent}
];

export const ALL_ROUTES: Routes = ROUTES1.concat(ROUTES2);

we get a compilation error:

ERROR in Cannot read property 'loadChildren' of undefined

Couple of similar questions have been asked here, but no resolution for this problem. Is there a possible solution? Possibly an explanation of what is going on?

user_7960402 · Answer

For those who are searching for posts with answers - as suggested above by Danil, this seams to be working. Please post comments if any potential issues.

export const ALL_ROUTES: Routes =
    [
      ...ROUTES1,
      ...ROUTES2
    ];

user_3351489 · Answer

You can try that too.

const supportedGames: Route[] = [
    {
        path: "pubg",
        component: LoginComponent
    }
];

const routes: Routes = [
    {
        path: "",
        component: LoginComponent,
    },
    {
        path: "login",
        component: LoginComponent,
    },
    {
        path: "main",
        component: MainViewComponent,
        children: ([
            {
                path: "game-list",
                component: GameListComponent,
            }
        ] as Route[]).concat(supportedGames)
    },
    {
        path: "**",
        redirectTo: ""
    }
];

Angular 7 routes concat results in compile error

2 Answers