JSONオブジェクトを使用して動的に子ルートを構築する

Question

以下のような私の子ルートをハードコードしました。しかし、私はJSONオブジェクトを使用して構築したい、すなわち、下に動的に追加し、そのコンポーネントを自動的にインポートする必要があります。 JSONオブジェクトもファイルに保存できます。要件を達成する方法はありますか？

[ 
    { path: 'step1', component: aComponent }, 
    { path: 'step2', component: bComponent }, 
    { path: 'step3', component: cComponent }, 
    { path: 'step4', component: dComponent }, 
    { path: 'step5', component: eComponent }, 
    { path: 'step6', component: fComponent } 
    ] 

最終結果は次のようになります。

export const abcRoutes: Routes = [ 
     { 
     path: '', 
     component: abcLandingComponent, 
     children: [ 
      { path: 'step1', component: aComponent }, 
      { path: 'step2', component: bComponent }, 
      { path: 'step3', component: cComponent }, 
      { path: 'step4', component: dComponent }, 
      { path: 'step5', component: eComponent }, 
      { path: 'step6', component: fComponent } 
     ] 
     } 

Answer 1

これをエクスポートできますか？

import { aComponent } from './aComponent.componet'; 
import { bComponent } from './bComponent.componet';  
etc... 

// or use a barrel file. 

import { aComponent, bComponent, etc.. } from './components'; 

export const childRoutes = [ 
    { path: 'step1', component: aComponent }, 
    { path: 'step2', component: bComponent }, 
    { path: 'step3', component: cComponent }, 
    { path: 'step4', component: dComponent }, 
    { path: 'step5', component: eComponent }, 
    { path: 'step6', component: fComponent } 
]; 

それから、

import { childRoutes } from './routes'; 

export const abcRoutes: Routes = [ 
{ 
    path: '', 
    component: abcLandingComponent, 
    children: childRoutes 
}];