Angular 13中如何正确实现批量相似路由的动态配置

你的写法编译失败核心是两点：

• Angular路由配置的component属性要求传入组件类的构造函数引用，你传入的拼接字符串无法被Angular路由识别，也无法通过TypeScript的类型校验
• Angular 13默认开启AOT编译，所有路由关联的组件必须在编译阶段可被静态分析，无法通过运行时拼接的字符串动态查找组件类

核心思路是提前建立板块标识和对应组件类的显式映射，再循环生成路由配置，既保留批量生成的简洁性，也符合Angular的编译要求。

第一步：编写类型安全的路由生成函数 #

// 提前导入所有板块组件和依赖
import { SectionAComponent } from './sections/section-a.component';
import { SectionBComponent } from './sections/section-b.component';
import { SectionCComponent } from './sections/section-c.component';
// 其余Section组件按相同规则导入
import { AuthGuard } from './guards/auth.guard';
import { Routes } from '@angular/router';

const configureRoutes = (): Routes => {
  // 显式声明板块和组件的映射关系，AOT编译可静态识别
  const sectionComponentMap = {
    A: SectionAComponent,
    B: SectionBComponent,
    C: SectionCComponent,
    // 后续新增板块在此处追加映射即可
  } as const;

  const sectionKeys = Object.keys(sectionComponentMap) as (keyof typeof sectionComponentMap)[];
  const childRoutes: Routes = [];

  for (const key of sectionKeys) {
    childRoutes.push({
      path: `section-${key.toLowerCase()}`,
      component: sectionComponentMap[key],
      canActivate: [AuthGuard]
    });
  }

  return childRoutes;
};

第二步：主路由配置直接调用函数即可 #

你的原有主路由写法逻辑是可行的，补全语法闭合即可正常使用：

const routes: Routes = [
  {
    path: 'applicant/info',
    component: ApplicantComponent,
    children: configureRoutes()
  }
  // 其余顶层路由配置
];

• 不要尝试通过字符串拼接动态import、或者通过类名字符串反射查找组件，这类写法在AOT编译模式下无法正常工作，生产构建会抛出异常
• 所有公共的路由配置（比如公共的canActivate守卫、data数据、resolve守卫等）都可以在循环内统一配置，后续修改公共逻辑只需要调整一处
• 给路由生成函数明确标注返回值类型Routes，TypeScript会在编译阶段自动校验生成的配置格式是否符合路由要求，提前排查错误

内容的提问来源于stack exchange，提问作者Kgn-web