Angular17+AngularFire17 SSR项目构建ESM依赖警告求解决方案

问题场景 #

项目环境：Angular 17、AngularFire 17，启用Service Worker（SW）和服务端渲染（SSR）
执行ng build命令时，出现以下CommonJS模块导致的优化 bailout警告：

▲ [WARNING] Module 'undici' used by 'node_modules/@firebase/auth/dist/node-esm/index.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module '@grpc/grpc-js' used by 'node_modules/@firebase/firestore/dist/index.node.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module '@grpc/proto-loader' used by 'node_modules/@firebase/firestore/dist/index.node.mjs' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'faye-websocket' used by 'node_modules/@firebase/database/dist/node-esm/index.node.esm.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies


▲ [WARNING] Module 'undici' used by 'node_modules/@firebase/functions/dist/esm-node/index.node.esm.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

▲ [WARNING] Module 'undici' used by 'node_modules/@firebase/storage/dist/node-esm/index.node.esm.js' is not ESM

  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

项目核心依赖版本：

# Angular: 17.0.8
# animations, cli, common, compiler, compiler-cli, core, forms
# platform-browser, platform-browser-dynamic, platform-server
# router, service-worker, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.8
@angular-devkit/build-angular   17.0.8
@angular-devkit/core            17.0.8
@angular-devkit/schematics      17.0.8
@schematics/angular             17.0.8
rxjs                            7.8.1
typescript                      5.2.2

解决步骤 #

1. 配置允许的CommonJS依赖 #

打开项目根目录的angular.json文件，找到build配置节点下的options字段，添加allowedCommonJsDependencies数组，将所有警告涉及的模块列入其中：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 保留原有配置
    "allowedCommonJsDependencies": [
      "undici",
      "@grpc/grpc-js",
      "@grpc/proto-loader",
      "faye-websocket"
    ]
  }
}

若项目包含SSR的服务端构建配置（通常为server目标），需同步在该配置的options中添加相同的allowedCommonJsDependencies数组。

2. 重新执行构建 #

运行ng build命令，此时相关警告会被抑制，构建将正常完成并生成dist文件夹。

补充说明 #

这些警告仅提示存在优化限制，不会导致构建失败。后续若Firebase相关依赖更新为纯ESM版本，可移除上述配置以恢复完整优化能力。

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