Angular 10+如何动态添加服务端返回的懒加载路由并更新配置

你遇到的问题本质是Webpack静态分析限制导致的：Angular的loadChildren依赖Webpack的动态导入import()语法实现懒加载，硬编码的导入路径会被Webpack在编译阶段识别，提前将对应模块打包为独立chunk；而你用运行时变量拼接的路径，Webpack在编译阶段无法感知需要打包哪些模块，导致对应模块没有被纳入打包产物，运行时加载失败就会触发路由匹配错误。

方案1：预定义模块映射表（最推荐，稳定性最高） #

提前把所有可能用到的管理端子模块的导入逻辑预定义到映射表中，Webpack编译时会主动识别所有导入语句，将对应模块全部打包，运行时直接根据服务端返回的权限列表从映射表中取对应配置即可。
代码示例：

// 提前定义所有管理端子模块的映射关系，新增模块只需更新该映射表即可
const ADMIN_MODULE_MAPPING: Record<string, () => Promise<unknown>> = {
  'games-config': () => import('../admin/games-config/games-config.module').then(m => m.GamesConfigModule),
  'challenges-config': () => import('../admin/challenges-config/challenges-config.module').then(m => m.ChallegesConfigModule),
  'posts': () => import('../admin/posts/posts.module').then(m => m.PostsModule),
  // 其余所有管理端子模块均在此处添加
}

export const adminRoutifyDynamic = () => {
  const allowed = window['services'].cry.get('allowed', true);
  const routes = [];
  for (const subm of allowed) {
    const name = subm.split('/').pop();
    // 仅保留权限允许、且在映射表中存在的路由
    if (name && ADMIN_MODULE_MAPPING[name]) {
      routes.push({
        path: name,
        loadChildren: ADMIN_MODULE_MAPPING[name]
      });
    }
  }
  return routes;
};

该方案优点是无额外打包冗余，运行时稳定性高，仅需在新增模块时同步更新映射表即可，维护成本极低。

方案2：使用Webpack魔法注释批量匹配模块 #

如果不想维护映射表，可以通过Webpack魔法注释指定需要打包的模块范围，让Webpack在编译阶段自动将所有匹配规则的模块纳入打包产物。
代码示例：

export const adminRoutifyDynamic = () => {
  const allowed = window['services'].cry.get('allowed', true);
  const routes = [];
  for (const subm of allowed) {
    const name = subm.split('/').pop();
    if (!name) continue;
    const module = startCase(camelCase(name)).replace(/ /g, '') + 'Module';
    routes.push({
      path: name,
      // 通过魔法注释告诉Webpack打包admin目录下所有的module文件
      loadChildren: () => import(/* webpackInclude: /admin\/.*\.module\.ts$/ */ `../admin/${name}/${name}.module`).then(m => m[module])
    });
  }
  return routes;
};

该方案无需手动维护映射表，但会将admin目录下所有模块都打包为独立chunk，即使部分模块没有任何用户有权限访问，也会生成对应的打包文件，适合管理端模块数量不多的场景使用。

内容的提问来源于stack exchange，提问作者Walter Gandarella