Angular项目构建mathjs引发Big integer literals环境兼容错误

问题场景 #

开发模式（HMR/Angular内置服务器）运行无报错，但执行构建命令 ng build --configuration=dev 时出现以下错误：

Error: Optimization error [main.8ddce6e0bbb9f7d7.js]: ✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome61.0", "edge79.0", "firefox60.0", "ios15.6", "opera110.0", "safari17.4")

    main.8ddce6e0bbb9f7d7.js:219978:14:
      219978 │       if (n < 0n) {
             ╵               ~~

原因 #

开发模式下Angular不会严格校验目标环境的语法兼容性，也不会启用完整代码优化；但构建模式会按照配置的目标环境做语法校验，mathjs代码中使用了BigInt字面量（如0n），而你的目标环境（如Chrome 61）不支持该语法（BigInt字面量从Chrome 67开始支持）。

解决方案 #

方案1：升级目标环境版本

修改项目的浏览器兼容配置，将目标环境提升到支持BigInt的版本：

1. 打开项目根目录的.browserslistrc文件，替换内容为：

last 2 Chrome versions
last 2 Firefox versions
last 2 Edge versions
last 2 Safari versions

或者指定具体兼容版本：

chrome >= 67
edge >= 79
firefox >= 68
ios >= 14
safari >= 14

2. 重新执行构建命令 ng build --configuration=dev

方案2：配置构建工具转译BigInt语法

如果需要保留旧目标环境，让构建工具自动转译BigInt字面量：

• Angular 16+（使用esbuild）：
  在angular.json中找到项目的dev构建配置，添加esbuildOptions指定支持BigInt的目标版本：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "configurations": {
            "dev": {
              "options": {
                "esbuildOptions": {
                  "target": ["chrome67", "edge79", "firefox68", "ios14", "safari14"]
                }
              }
            }
          }
        }
      }
    }
  }
  

• 旧版本Angular（使用webpack）：
  1. 安装babel插件：npm install @babel/core @babel/plugin-transform-bigint --save-dev
  2. 在angular.json的dev构建配置中添加babel选项：

     "projects": {
       "your-project-name": {
         "architect": {
           "build": {
             "configurations": {
               "dev": {
                 "options": {
                   "allowedCommonJsDependencies": ["mathjs"],
                   "babelOptions": {
                     "plugins": ["@babel/plugin-transform-bigint"]
                   }
                 }
               }
             }
           }
         }
       }
     }
     

  3. 重新执行构建命令。

方案3：使用mathjs的兼容版本

修改mathjs的导入方式，使用其预转译的兼容版本：

// 替换原导入
import * as math from 'mathjs';
// 改为兼容版本
import * as math from 'mathjs/browser';

内容的提问来源于stack exchange，提问作者Kamil Kiełczewski