动态路由数组正在初始化

Question

我想通过一些外部元数据动态初始化Routes数组。更具体地说，我想要实现的是像这个

const appRoutes: Routes = [
// ...some other routes...
{
path: `${externalMetadata}`,
loadChildren: () =>
import(`./pathToModule/${externalMetadata}.module`).then( m => m.SomeModule)
}
] 

我的问题是：

1. 这是正确的方法吗
2. 我能够实现这种行为，但有时我会收到编译错误

.ts在TypeScript编译中丢失。请确认通过"files"或"include"属性在tsconfig中。

并且当我从导入模块路径替换${externalMetadata}时，重新编译成功(这很奇怪(。

Answer 1

如果有人面临这个问题

TypeScript编译中缺少

.ts。请确认通过"files"或"include"属性在tsconfig中。

解决方案是将要动态加载的每个模块文件的路径添加到tsconfig.app.json文件的files数组中。

例如，考虑以下路由阵列：

//app-routing.module.ts
const routes : Routes = [
{
path: '',
/* Because we are using dynamic import module declaration, we have to declare every lazy loaded
module into tsconfig.app.json files array in order to let compiler know about them.*/
loadChildren: () =>
import(
`./${getModulePathBySomeLogic()}/${getModuleFileNameBySomeLogic()}.module`
).then(m => m[`${getModuleClassNameBySomeLogic()}Module`])
},
]

现在，我们所要做的就是用我们将要动态加载的每个路径更新tsconfig.app.json文件中的files数组。例如：

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "",
"types": []
},
"angularCompilerOptions": {
"preserveWhitespaces": false
},
"files": [
"main.ts",
"polyfills.ts",
"app/some-module1/some-module1.module.ts",
"app/some-module1/some-module1-routing.module.ts",
"app/some-module1/some-module2.module.ts",
"app/some-module1/some-module2-routing.module.ts",      ],
"include": ["src/**/*.d.ts"]
}

注意：如果将路由逻辑和模块逻辑添加到不同的ts文件中，则必须将两者添加到文件数组中。