Angular routes pushed to array after creation not working in production

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.

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 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Use Cookies in Angular for Storing user’s Credentials

In this post, I will be explaining about using Cookies in Angular for Storing user’s Credentials

Angular Tutorial - Learn Angular from Scratch

Angular Tutorial - Learn Angular from Scratch: This course is for beginners who are curious on how to get started with Angular. In this course you will learn how to download, install and play around with Angular. We teach you the main components of Angular, so that you can get up and running with it asap. You will learn now to start building applications with Angular.

An Angular Roadmap — The Past, Present, and Future of Angular

✅Interested in being an Angular developer in 2019? ... blog post it's most likely that you've written some code in javaScript in the past.