Angular微前端迁移至含NX新版本后运行远程应用报错求助

问题现象 #

迁移旧版Angular微前端项目到包含NX的新版本依赖后，运行任意远程应用时控制台出现两个核心错误：

1. Uncaught TypeError: Failed to resolve module specifier "module". Relative references must start with either "/", "./", or "../".
2. ChunkLoadError，报错链路指向app.module.ts的loadChildren方法

排查与解决步骤 #

1. 修正非法模块导入路径 #

第一个错误提示存在不符合规范的模块导入，需：

• 全局搜索项目中所有import ... from "module"的代码，替换为.//../开头的相对路径或合法绝对路径
• 检查第三方依赖是否存在过时导入写法，如有则升级对应依赖版本

2. 调整路由懒加载配置 #

ChunkLoadError关联loadChildren，大概率是路由配置不兼容NX新版本：

• 将app.module.ts中旧的懒加载写法替换为动态导入箭头函数格式：

  // 旧写法
  loadChildren: './path/to/module#FeatureModule'
  // 新兼容写法
  loadChildren: () => import('./path/to/module').then(m => m.FeatureModule)
  

• 确认宿主应用路由配置中，远程应用的入口模块路径引用正确

3. 清理缓存并重建项目 #

NX和Webpack缓存可能残留旧配置：

• 执行nx reset清理NX缓存
• 删除node_modules、dist文件夹，重新执行npm install和nx build

4. 校验NX微前端配置 #

检查project.json或nx.json中的关键配置：

• 远程应用build目标的outputPath、deployUrl是否符合新版本要求
• 宿主应用moduleFederation.config.js里的remotes配置，是否正确指向远程应用的构建产物路径

补充排查方向 #

若上述步骤无效，可检查Webpack的resolve.modules配置，确认没有错误解析规则导致"module"识别异常；同时确保Angular与NX版本完全兼容，避免版本不匹配引发底层问题

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