Angular库执行ng build时出现Invalid string length报错求助

问题描述 #

在Angular 14.2.6环境下构建包含200+组件的单一大型库时，执行ng build <project>命令，fesm2020构建成功，但fesm2015阶段触发Invalid string length错误。其中fesm2020的dist源映射文件大小达32MB，fesm2015的.mjs.map文件达33MB。

重现步骤 #

• 创建200+组件并将其纳入单个库模块
• 执行ng build <project>命令

报错信息 #

生成fesm2015后出现Invalid string length错误

环境信息 #

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 14.2.6
Node: 18.15.0 (Unsupported)
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 14.2.6
... animations, cli, common, compiler, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.6
@angular-devkit/build-angular   14.2.6
@angular-devkit/core            14.2.6
@angular-devkit/schematics      14.2.6
@angular/compiler-cli           14.3.0
@schematics/angular             14.2.6
ng-packagr                      14.0.1
rxjs                            6.5.4
typescript                      4.7.3

排查建议 #

• 启用详细构建日志
  执行ng build <project> --verbose或ng build <project> --log-level debug，获取完整错误堆栈，定位触发错误的具体构建环节（如terser压缩、源映射生成等）。

• 调整源映射生成配置
  在库的tsconfig.lib.json中修改sourceMap配置：尝试关闭fesm2015的源映射（设置"sourceMap": false），或调整inlineSources等参数，验证是否因源映射文件过大触发字符串长度限制。

• 优化terser压缩配置
  在angular.json的库构建配置中添加自定义terser选项，禁用高内存消耗的压缩逻辑，逐步排查问题点：

  "projects": {
    "<your-library>": {
      "architect": {
        "build": {
          "options": {
            "terserOptions": {
              "compress": {
                "pure_getters": false,
                "passes": 1
              },
              "mangle": false
            }
          }
        }
      }
    }
  }
  

• 修复Node版本兼容性
  当前Node 18.15.0被标记为Unsupported，降级到Angular 14推荐的Node 14.x/16.x LTS版本，避免版本不兼容导致的内存或字符串处理异常。

• 升级依赖版本
  将ng-packagr升级到14.x系列的最新版本（当前为14.0.1），该版本可能修复了fesm2015构建中的已知bug。

• 单独构建fesm2015
  直接使用ng-packagr命令单独构建fesm2015：ng-packagr -p ng-package.json --configuration production --target fesm2015，获取更精准的错误输出。

• 排查组件异常代码
  检查是否有组件包含超长字符串、重复模板代码或生成异常大的AST节点，这类内容在转译到ES2015时可能触发字符串长度超限。

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