Angular中动态导入组件使用变量路径报错问题

正常运行的代码 #

直接传入字符串字面量路径时，动态导入可以正常工作：

componentToBeLoaded;
import('src/app/common/exact-path-to-the-component/required.component').then((value) => {
  this.componentToBeLoaded = value['RequiredComponent'];
});

报错的代码 #

将路径存入变量后传入import()会触发模块找不到的错误：

componentToBeLoaded;
const path = 'src/app/common/exact-path-to-the-component/required.component';
import(path).then((value) => {
  this.componentToBeLoaded = value['RequiredComponent'];
});

错误信息：

Error: Uncaught (in promise): Error: Cannot find module 'src/app/common/exact-path-to-the-component/required.component'.

问题原因 #

这本质是Angular默认使用的打包工具Webpack的静态分析机制导致的：

• 当import()的参数是字符串字面量时，Webpack在项目构建阶段就能明确识别目标模块的路径，会提前将该组件打包成独立的chunk文件，运行时就能正确找到并加载。
• 如果用变量传递路径，Webpack在构建阶段无法确定最终要加载的具体模块，也就不会提前打包对应的chunk，所以运行时会出现找不到模块的错误。

替代解决方案 #

如果需要动态指定路径，Webpack支持静态基础路径+变量片段的写法，这样它会提前打包基础路径下所有符合结构的模块，运行时根据变量值加载对应chunk：

componentToBeLoaded;
const pathSegment = 'exact-path-to-the-component';
import(`src/app/common/${pathSegment}/required.component`).then((value) => {
  this.componentToBeLoaded = value['RequiredComponent'];
});

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