title: Angular routes pushed to array after creation not working in production
body: <p>I've created a github repository which has a perfect example of my issue.</p>
  
  <p><a href="https://github.com/rjriel/dynamic-route-example" rel="noreferrer">https://github.com/rjriel/dynamic-route-example</a></p>
  
  <p>The important part of the code in this repo is in <code>app.module.ts</code></p>
  
  <pre><code>let mainRoutes: Routes = [{
    path: "first",
    component: FirstComponent
  }]
  
  mainRoutes.push({
    path: "second",
    component: SecondComponent
  })
  
  @NgModule({
  ...
    imports: [
      RouterModule.forRoot(mainRoutes),
  </code></pre>
  
  <p>When running this code in development (ie. <code>ng serve</code>) both routes navigate correctly. However, when running this code in production (ie. <code>ng serve --prod</code>) the <code>second</code> route that was added through <code>mainRoutes.push</code> results in the following error:</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>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:</p>
  
  <pre><code>import * as PageLayouts from '../page-layouts.json'
  import { MainLayoutComponent } from './main-layout/main-layout.component'
  
  Object.keys(PageLayouts).forEach(key =&gt; {
    mainRoutes.push({
      path: key,
      component: MainLayoutComponent
    })
  })
  </code></pre>
  
  <p>I do a <code>console.log(mainRoutes)</code> after the above forEach and see all the routes in the array as expected. Also for clarification, this <code>forEach</code> loop is done before the <code>@NgModule</code> 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.</p>