Динамически создать массив маршрутов для Angular Router

Question

Я хотел бы создать массив routes для маршрутизатора Angular динамически, чтобы условно включать лениво загруженные маршруты.

app-routing.ts

// fix declaration working perfectly fine - nothing special here
const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'some-url', loadChildren: './path/to/my.module#MyLazyLoadedModlue' },
      ...
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

---

Чтобы добиться условного использования ленивого загруженного маршрута, я попытался:

const useModule = true;  // simulating condition here

children: [
  useModule ?  { path: 'some-url', loadChildren: './path/to/my.module#MyLazyLoadedModlue' } : [],
      ...
    ]

Поскольку этот метод прекрасно работает для стандартных модулей, я думал, что он будет работать, но это привело к ошибке TS, которую я не смог обойти.

Тип '{путь: строка; loadChildren: () => typeof MyLazyLoadedModlue; } | undefined [] 'не является типом массива. Используйте опцию компилятора '--downlevelIteration', чтобы разрешить итерацию итераторов.

---

Затем я попытался сгенерировать маршруты с помощью функции ...

function getRoutes() {
  // some logic to dynamically generate the routes array

  return routes;
}

imports: [RouterModule.forRoot(getRoutes())],
...

... что вызывает ошибку компиляции:

ОШИБКА в Не удается прочитать свойство 'loadChildren' из неопределенного

Кто-нибудь знает, как этого можно достичь, и объясните, почему это вызывает проблемы? Я думал, что это не будет проблемой - динамически генерировать массив маршрутов.

Answer 1

Я вижу, что вы объявляете вложенный дочерний массив в ложном состоянии:

children : [ [] ]

То, что я думаю, вам нужно, по крайней мере, это объявление этого вложенного массива

[{path: ''}]

попробуй!