Angular：如何从配置文件实现模块懒加载？

问题原因 #

Angular依赖Webpack进行模块打包，Webpack需要编译时静态分析所有懒加载模块的路径才能正确生成懒加载chunk。当你把完整模块路径放在变量里传给import()时，Webpack无法静态识别这个路径对应的模块，导致运行时触发找不到模块的错误。

解决方案 #

方案1：提前枚举模块映射表 #

把所有可能的懒加载模块提前映射到对应的import()语句，让Webpack能静态分析到每个模块：

// 定义模块映射：key对应config里的模块标识，value是懒加载函数
const moduleLoaderMap = {
  'local-test-feature': () => import('./local-features/local-test-feature/local-test-feature.module').then(m => m.LocalTestFeatureModule),
  // 其他需要懒加载的模块都在这里添加
};

// 从config.json读取模块信息
const configModule = {
  routePath: 'local-test-feature',
  moduleKey: 'local-test-feature'
};

// 生成路由
lazyRoutes.push({
  path: configModule.routePath,
  loadChildren: moduleLoaderMap[configModule.moduleKey]
});

方案2：使用带静态前缀的动态路径 #

如果你的模块路径有统一规律（比如都在./local-features/下，命名格式一致），可以用静态字符串+变量的模板字符串，让Webpack识别到模块的范围：

// 从config.json读取模块名称
const moduleName = 'local-test-feature';
const routePath = 'local-test-feature';
const moduleClassName = `${moduleName.charAt(0).toUpperCase()}${moduleName.slice(1)}Module`;

lazyRoutes.push({
  path: routePath,
  loadChildren: () => import(`./local-features/${moduleName}/${moduleName}.module`).then(m => m[moduleClassName])
});

这种方式下，Webpack会把./local-features/下符合${moduleName}/${moduleName}.module格式的所有模块都打包成懒加载chunk，所以要确保模块命名严格遵循规则，避免打包不必要的文件。

关键注意点 #

• 绝对不能用纯变量作为import()的参数，必须保留静态路径部分，让Webpack能进行静态分析。
• 如果config.json里的模块信息是动态配置的，要确保配置的标识和代码里的映射表/路径规则严格对应，否则还是会找不到模块。

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