Angular动态配置懒加载路由报错，如何实现动态模块导入？

问题核心是Webpack 需要静态分析 import 路径才能正确打包懒加载模块，直接用变量作为 import 参数时，Webpack 无法提前识别要打包的模块，导致运行时找不到。

解决方案1：预定义模块映射表 #

提前把所有需要懒加载的模块用静态 import 定义好，通过键值对映射，让 Webpack 能扫描到这些模块并打包：

// 预先定义所有懒加载模块的映射
const lazyModuleMap: Record<string, () => Promise<any>> = {
  '../richieste/richieste.module': () => import('../richieste/richieste.module'),
  // 其他需要懒加载的模块都在这里添加
};

export function buildRoutes(options: any, router: Router, roles: string[]): Routes {
    const lazyRoutes: Routes = Object.keys(options)
        .map((key) => {
            const entry: RouteConf = options[key];
            const auth = entry.authRoute as string[];
            let output: Route =   {
                path: entry.routePath,
                redirectTo: 'fallback',
            };
            if (auth.some(item => roles.includes(item))){
                output = {
                    path: entry.routePath,
                    loadChildren: () => lazyModuleMap[entry.exposedModule]().then((m) => m[entry.ngModuleName])
                }
             }
            return output;
        });

    return [...lazyRoutes,...APP_ROUTES ];
}

解决方案2：使用 Webpack 的 require.context 批量导入 #

如果模块都集中在某个目录下，可以用 require.context 让 Webpack 自动扫描并打包该目录下的所有符合规则的模块，实现动态匹配：

// 创建 Webpack 上下文，扫描上级目录下所有 .ts 结尾的 module 文件
// 参数说明：扫描目录、是否递归子目录、文件名匹配正则
const modulesContext = require.context('../', true, /\.module\.ts$/);

export function buildRoutes(options: any, router: Router, roles: string[]): Routes {
    const lazyRoutes: Routes = Object.keys(options)
        .map((key) => {
            const entry: RouteConf = options[key];
            const auth = entry.authRoute as string[];
            let output: Route =   {
                path: entry.routePath,
                redirectTo: 'fallback',
            };
            if (auth.some(item => roles.includes(item))){
                output = {
                    path: entry.routePath,
                    loadChildren: () => {
                        // 通过上下文加载对应模块
                        const modulePromise = modulesContext(entry.exposedModule);
                        return modulePromise.then((m) => m[entry.ngModuleName]);
                    }
                }
             }
            return output;
        });

    return [...lazyRoutes,...APP_ROUTES ];
}

关键注意事项 #

1. 确保 entry.exposedModule 的路径和手动编写的完全一致，包括相对路径层级、文件名大小写（Linux/macOS 系统区分大小写）。
2. 两种方案的核心都是让 Webpack 在编译时能明确知道需要打包哪些模块，避免纯动态的路径导致打包遗漏。

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