I'm using Angular 12 and I'm getting the following error as a result of my routes setup: RangeError: Maximum call stack size exceeded.

My app.routes.ts is configured to bring in routes from different files. I currently have approximately 580 routes configured as below:

import { accountRoutes } from "./routes/app.routes.account";

export var routes: Routes = [
// a few top level routes defined here
];

routes = routes.concat(accountRoutes);
routes = routes.concat(fileOne);
routes = routes.concat(fileTwo);

This was working fine until I tried to add another route and I started to get the call stack error. There are no issues with the route itself as if I remove several other routes, it works as expected.

I've tried using a for loop instead of array.concat, I've also tried using the spread syntax but I get the same error.

Currently my workaround is to add new routes directly to app.routes.ts rather than trying to bring them in from another file.

Can someone please help explain the following:

1. Why does my workaround work - the routes array is the same size in both cases
2. If the Angular app is already loaded and I navigate to the most recent route I added, the error doesn't occur, it only occurs if I refresh the page from that route