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
Post a Comment