在Angular+NX单体仓库中引入@microsoft/signalr时出现加载错误

开发环境下出现Uncaught TypeError: Failed to resolve module specifier "module"和ChunkLoadError，但生产环境正常，大概率是NX的模块共享策略、webpack chunk分割配置和开发环境优化设置冲突导致的，试试以下解决方案：

方法1：调整共享依赖配置 #

• 打开项目的project.json或nx.json，找到targets -> build -> options -> sharedDependencies（如果用了模块联邦），把@microsoft/signalr设为单例共享，或者直接从共享列表移除：

  "sharedDependencies": {
    "@microsoft/signalr": {
      "singleton": true,
      "strictVersion": true
    }
  }
  

• 要是用的是module-federation.config.js，修改共享配置：

  module.exports = {
    shared: {
      "@microsoft/signalr": {
        singleton: true,
        requiredVersion: "^7.0.0" // 替换成你实际用的版本
      }
    }
  };
  

方法2：禁用开发环境的chunk分割 #

• 在angular.json或project.json的build配置里，给开发环境关闭公共chunk分割：

  "targets": {
    "build": {
      "configurations": {
        "development": {
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true,
          "commonChunk": false
        }
      }
    }
  }
  

方法3：强制将signalr打包到指定chunk #

• 在angular.json的build -> options里添加允许的CommonJS依赖：

  "build": {
    "options": {
      "allowedCommonJsDependencies": [
        "@microsoft/signalr"
      ]
    }
  }
  

• 如果自定义了webpack配置，在webpack.config.js里添加chunk分组规则：

  module.exports = (config) => {
    config.optimization.splitChunks.cacheGroups.signalr = {
      test: /[\\/]node_modules[\\/]@microsoft[\\/]signalr[\\/]/,
      name: 'vendor.signalr',
      chunks: 'all',
      enforce: true
    };
    return config;
  };
  

方法4：清理缓存后重新构建 #

• 执行NX缓存重置：

  nx reset
  

• 删除node_modules和dist目录：

  rm -rf node_modules dist
  

• 重新安装依赖并启动开发服务：

  npm install
  nx serve your-project-name --configuration=development
  

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