Angular routes pushed to array after creation not working in production

I've created a github repository which has a perfect example of my issue.

https://github.com/rjriel/dynamic-route-example

The important part of the code in this repo is in app.module.ts

let mainRoutes: Routes = [{
  path: "first",
  component: FirstComponent
}]
mainRoutes.push({

path: “second”,

component: SecondComponent

})
@NgModule({

…

imports: [

RouterModule.forRoot(mainRoutes),

When running this code in development (ie. ng serve) both routes navigate correctly. However, when running this code in production (ie. ng serve --prod) the second route that was added through mainRoutes.push results in the following error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL

Segment: ‘second’

Error: Cannot match any routes. URL Segment: ‘second’

at t.BkNc.t.noMatchError (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.selector (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at t.BkNc.t.noMatchError (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.selector (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.T14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at u (polyfills.8c1e4b56978ce6347832.bundle.js:1)

at u (polyfills.8c1e4b56978ce6347832.bundle.js:1)

at polyfills.8c1e4b56978ce6347832.bundle.js:1

at e.invokeTask (polyfills.8c1e4b56978ce6347832.bundle.js:1)

at Object.onInvokeTask (vendor.0828fd59ec5e6a599e72.bundle.js:1)

at e.invokeTask (polyfills.8c1e4b56978ce6347832.bundle.js:1)

at r.runTask (polyfills.8c1e4b56978ce6347832.bundle.js:1)

at o (polyfills.8c1e4b56978ce6347832.bundle.js:1)

at t.invokeTask [as invoke] (polyfills.8c1e4b56978ce6347832.bundle.js:1)

at h (polyfills.8c1e4b56978ce6347832.bundle.js:1)

Would anybody happen to know why compiling for production would produce this error while it works completely fine in development? Or at least a better way to debug?

Edit:

The real life implementation of what I’m doing here is that I have multiple pages on a site with the same layout of information, so I created a json file that is an object where each key is the route and value is the information for the route. Then I load the json and add the routes, as shown here:

import * as PageLayouts from ‘…/page-layouts.json’

import { MainLayoutComponent } from ‘./main-layout/main-layout.component’

Object.keys(PageLayouts).forEach(key => {

mainRoutes.push({

path: key,

component: MainLayoutComponent

})

})

I do a console.log(mainRoutes) after the above forEach and see all the routes in the array as expected. Also for clarification, this forEach loop is done before the @NgModule declaration, as shown in the example code. This all works totally fine with JiT compilation for development, but has the issues addressed above with AoT compilation for production.

#angular