Angular 10构建失败：query-string模块解析错误求助

问题原因 #

query-string新版本使用了Angular 10默认Webpack配置不支持的ES2020语法（可选链?.、空值合并??），且Webpack默认不会转译node_modules目录下的文件，导致模块解析失败。你之前在angular.json的scripts节点添加文件的方式无效，该配置仅用于全局引入脚本，无法解决编译转译问题。

解决方法 #

方法一：降级query-string到兼容版本 #

执行以下命令安装Angular 10兼容的query-string版本：

npm install query-string@6.14.1

该版本是最后一个未使用ES2020语法的稳定版本，可直接在Angular 10环境中运行。

方法二：配置Webpack转译query-string模块 #

若需保留query-string新版本，需修改Angular的Webpack配置，让其转译该模块：

1. 安装自定义Webpack构建工具：

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

2. 在项目根目录创建custom-webpack.config.js文件，内容如下：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           include: /node_modules\/query-string/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env']
             }
           }
         }
       ]
     }
   };
   

3. 安装Babel相关依赖：

   npm install --save-dev babel-loader @babel/core @babel/preset-env
   

4. 修改angular.json中的构建配置：
   • 将projects -> [你的项目名称] -> architect -> build的builder替换为@angular-builders/custom-webpack:browser，并添加自定义Webpack配置项：

     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./custom-webpack.config.js"
         },
         // 保留原有其他配置
       }
     }
     

   • 将serve的builder替换为@angular-builders/custom-webpack:dev-server：

     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       // 保留原有其他配置
     }
     

5. 重新执行构建命令：

   ng build
   

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