angular2 routing - Angular routes pushed to array after creation not working in production -


i've created github repository has perfect example of issue.

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

the important part of code in repo in app.module.ts

let mainroutes: routes = [{   path: "first",   component: firstcomponent }]  mainroutes.push({   path: "second",   component: secondcomponent })  @ngmodule({ ...   imports: [     routermodule.forroot(mainroutes), 

when running code in development (ie. ng serve) both routes navigate correctly. however, when running code in production (ie. ng serve --prod) second route added through mainroutes.push results in following error:

error error: uncaught (in promise): error: cannot match routes. url  segment: 'second' error: cannot match routes. url segment: 'second'     @ t.bknc.t.nomatcherror (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.selector (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ t.bknc.t.nomatcherror (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.selector (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e.error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.t14+.e._error (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ u (polyfills.8c1e4b56978ce6347832.bundle.js:1)     @ u (polyfills.8c1e4b56978ce6347832.bundle.js:1)     @ polyfills.8c1e4b56978ce6347832.bundle.js:1     @ e.invoketask (polyfills.8c1e4b56978ce6347832.bundle.js:1)     @ object.oninvoketask (vendor.0828fd59ec5e6a599e72.bundle.js:1)     @ e.invoketask (polyfills.8c1e4b56978ce6347832.bundle.js:1)     @ r.runtask (polyfills.8c1e4b56978ce6347832.bundle.js:1)     @ o (polyfills.8c1e4b56978ce6347832.bundle.js:1)     @ t.invoketask [as invoke] (polyfills.8c1e4b56978ce6347832.bundle.js:1)     @ h (polyfills.8c1e4b56978ce6347832.bundle.js:1) 

would happen know why compiling production produce error while works fine in development? or @ least better way debug?

edit:

the real life implementation of i'm doing here have multiple pages on site same layout of information, created json file object each key route , value information route. load json , add routes, shown here:

import * pagelayouts '../page-layouts.json' import { mainlayoutcomponent } './main-layout/main-layout.component'  object.keys(pagelayouts).foreach(key => {   mainroutes.push({     path: key,     component: mainlayoutcomponent   }) }) 

i console.log(mainroutes) after above foreach , see routes in array expected. clarification, foreach loop done before @ngmodule declaration, shown in example code. works totally fine jit compilation development, has issues addressed above aot compilation production.

the short answer when compile production, uses ahead of time (aot) process instead of in time (jit) process. why seeing different results.

you can read more aot here: https://angular.io/guide/aot-compiler

and article may helpful: http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/

just guessing here ... possible code not executing when compiled aot compiler?

mainroutes.push({   path: "second",   component: secondcomponent }) 

it not appear within angular component or service.

could more explicit trying accomplish code? trying load dynamic components?


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -