Angular项目运行报错：Webpack 4无法解析'querystring'求解决方案

可能的原因与解决方案 #

• 安装缺失的querystring包
  Node.js 12.x中querystring是内置模块，但部分webpack版本可能存在解析异常，直接安装该包即可：

  npm install querystring --save-dev
  

• 配置webpack的resolve.fallback
  在webpack.config.js中添加fallback配置，指定querystring的替代路径：

  module.exports = {
    resolve: {
      fallback: {
        "querystring": require.resolve("querystring-es3")
      }
    }
  };
  

  使用querystring-es3前需先安装依赖：

  npm install querystring-es3 --save-dev
  

• 修复依赖版本冲突
  虽然webpack 4.41.6与webpack-dev-server 3.11.0版本匹配，但依赖树可能存在隐性冲突，执行以下操作重置依赖：

  rm -rf node_modules package-lock.json
  npm install
  

  也可通过npm audit fix自动修复可解决的依赖问题。

• Angular CLI项目的专属配置
  若为Angular CLI项目，需通过自定义webpack扩展配置：

  1. 安装自定义构建依赖：

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

  2. 修改angular.json中的构建配置，指定自定义webpack文件路径：

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

  3. 在webpack.config.js中添加前文提到的resolve.fallback配置。

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