webpack5/Angular14运行项目报Can't resolve 'url'错误如何解决

Webpack 5 不再默认内置Node.js核心模块的浏览器端polyfill，deepstream.io-client-js依赖内部引用了Node.js原生的url模块，浏览器环境无对应实现，因此启动时抛出模块解析失败错误。

解决步骤 #

1. 安装url模块的浏览器polyfill #

在项目根目录执行对应包管理工具的安装命令：

# npm
npm install url --save

# yarn
yarn add url

# pnpm
pnpm add url

2. 安装Angular自定义webpack构建工具 #

Angular 14默认通过CLI封装了Webpack配置，无法直接修改webpack规则，需要安装对应版本的自定义构建器扩展配置。
注意安装的@angular-builders/custom-webpack大版本号必须和本地Angular版本保持一致，避免构建兼容问题。

npm install @angular-builders/custom-webpack@14 --save-dev

3. 新增自定义webpack配置文件 #

在项目根目录新建webpack.config.js文件，添加fallback配置映射url模块：

module.exports = {
  resolve: {
    fallback: {
      "url": require.resolve("url/")
    }
  }
};

4. 修改angular.json构建配置 #

打开项目根目录的angular.json文件，修改对应项目的构建、服务配置：

• 找到projects.[你的项目名称].architect.build节点，将原有builder值@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser，在options节点下新增customWebpackConfig配置项，指向刚创建的webpack配置文件，其余原有配置（outputPath、index、main等）保持不变：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    }
  }
}

• 找到projects.[你的项目名称].architect.serve节点，将原有builder值@angular-devkit/build-angular:dev-server替换为@angular-builders/custom-webpack:dev-server，其余配置保持不变即可，会自动继承build阶段的自定义webpack规则。

可选跳过方案 #

如果确认业务逻辑和依赖调用链不会触发url模块的相关代码，可以不安装polyfill，直接在webpack配置中将url模块设为空模块跳过解析，但该方式存在运行时报错风险：

module.exports = {
  resolve: {
    fallback: {
      "url": false
    }
  }
};

注：如果后续启动时还提示其他Node核心模块（如util、buffer、stream等）解析失败，按照相同逻辑安装对应polyfill包后，在resolve.fallback中添加对应映射即可。

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