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?

Answer 1

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
    ];