生成後に作成された角度ルートが配列にプッシュ

Question

私は問題の完全な例を持つgithubリポジトリを作成しました。

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

開発にこのコードを実行すると、このリポジトリ内のコードの重要な部分（すなわち。ng serve）app.module.ts

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

mainRoutes.push({ 
    path: "second", 
    component: SecondComponent 
}) 

@NgModule({ 
... 
    imports: [ 
    RouterModule.forRoot(mainRoutes), 

にある両方のルートを正しくナビゲートします。しかし、（すなわちng serve --prod。）の生産にこのコードを実行すると、次のエラーでmainRoutes.push結果によって追加されましたsecondルート：それが動作しながら、

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) 

は、誰もが生産用にコンパイルすると、このエラーを生成する理由を知ることが起こるだろう開発は完全にうまい？または少なくともデバッグのためのより良い方法は？

編集：

は、私がここでやっているの現実の実装では、私が情報の同じレイアウトとサイト上の複数のページを持っているということですので、私はどこオブジェクトであるJSONファイルを作成各キーは経路であり、値は経路に関する情報である。それから私は、JSONをロードし、次に示すように、ルートを追加します。

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 
    }) 
}) 

私は上記のforEach後console.log(mainRoutes)を行うと、予想通り、アレイ内のすべてのルートを参照してください。また、説明のために、このコード例に示すように、このforEachループが@NgModule宣言の前に実行されます。これは開発のためのJiTコンパイルではすべて正常に動作しますが、生産のためのAoTコンパイルでは上記の問題があります。

Answer 1

簡単な答えは、本番用にコンパイルするときに、Just In Time（JiT）プロセスの代わりにAhead of Time（AOT）プロセスを使用することです。そういうわけで、あなたは異なった結果を見ているのです。

あなたがここにAOT詳細を読むことができます：https://angular.io/guide/aot-compiler

を、この記事が参考になることがあります。http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation/

ちょうどここに推測...しかし、それはそれがコンパイルされたときに、このコードが実際に実行されていない可能性がありますAOTコンパイラとは？

mainRoutes.push({ 
    path: "second", 
    component: SecondComponent 
}) 

Angularコンポーネントまたはサービス内には表示されません。

あなたはこのコードで達成しようとしていることをより明示できますか？動的コンポーネントを読み込もうとしていますか？