【发布时间】：2019-03-06 18:55:15
【问题描述】：
我想为 Angular 路由器动态创建 routes 数组，以有条件地包含延迟加载的路由。
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”时出现错误
有谁知道如何做到这一点并解释为什么这会导致麻烦？我认为动态生成路由数组不会有问题。
【问题讨论】：
-
如果路由是动态加载的，我不明白有条件的原因，介意解释一下吗？
-
我使用不同的环境来支持不同的构建。在某些构建中，应该删除延迟加载路由的完整功能，因此我想根据相应环境文件中设置的条件动态包含路由。也许我走错了路，但我认为这应该是通过动态路线实现这一目标的最简单方法。
-
我建议重新考虑这一点。应用程序构建应该与环境无关。
-
也许另一种方法是在发布期间将这些环境文件作为 JSON 资产注入并使用它们而不是 env 文件。这确实与您的原始代码没有什么不同，而是将环境信息移动到发布定义。
-
我想通过排除路由来实现的目标是，延迟加载的模块及其所有子模块都可以被树摇走。通过仅使用我在发布构建后使用的静态 JSON，我将始终在我的构建中拥有整个应用程序，即使某些部分永远不会被使用。
标签： javascript angular angular-router