Angular9执行npm start时出现querystring模块找不到的报错求助

问题原因 #

Angular 9对应的webpack-dev-server版本依赖Node.js内置的querystring模块，但webpack 5及以上版本不再自动为浏览器环境polyfill Node.js核心模块。直接安装querystring包没用——它是Node端专用模块，浏览器环境无法兼容，反而会引发新错误。

解决方案 #

1. 安装浏览器兼容的polyfill包

用querystring-es3替代原生querystring，它是专门适配浏览器环境的兼容版本：

npm install querystring-es3 --save-dev

2. 配置webpack fallback（需自定义webpack配置）

Angular CLI默认隐藏webpack配置，需要用@angular-builders/custom-webpack扩展：

• 先安装自定义webpack工具：

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

• 在项目根目录创建webpack.config.js，添加如下配置：

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

• 修改angular.json中的构建配置，替换默认builder并引入自定义webpack配置：
  找到architect下的build和serve节点，修改为：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        },
        // 保留原有build配置项...
      }
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      // 保留原有serve配置项...
    }
  }
  

3. 清理缓存并重新安装依赖

执行以下命令确保依赖干净：

# Windows系统
rd /s /q node_modules && del package-lock.json
npm install
npm start

# macOS/Linux系统
rm -rf node_modules package-lock.json
npm install
npm start

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