Angular 17执行ng build时出现非ESM模块优化中断警告

我的Angular项目用npm start能正常运行，但执行ng build构建时弹出一堆警告，提示以下依赖不是ESM模块，可能打断优化流程：

▲ [警告] 被'./dashboard.component.ts'引用的模块'amazon-quicksight-embedding-sdk'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'node_modules/@aws-amplify/ui-angular/fesm2020/aws-amplify-ui-angular.mjs'引用的模块'qrcode'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'./permission.service.ts'引用的模块'ts-access-control'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'node_modules/@aws-amplify/ui/dist/esm/theme/createTheme.mjs'引用的模块'style-dictionary/lib/utils/deepExtend.js'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'node_modules/@aws-amplify/ui/dist/esm/theme/createTheme.mjs'引用的模块'style-dictionary/lib/utils/flattenProperties.js'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'node_modules/@aws-amplify/ui/dist/esm/theme/utils.mjs'引用的模块'lodash/kebabCase.js'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'node_modules/@aws-amplify/ui/dist/esm/theme/utils.mjs'引用的模块'style-dictionary/lib/utils/references/usesReference.js'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'./phone.service.ts'引用的模块'google-libphonenumber'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'node_modules/@aws-amplify/auth/dist/esm/providers/cognito/apis/signOut.mjs'引用的模块'@aws-crypto/sha256-js'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'node_modules/@aws-amplify/ui/dist/esm/machines/authenticator/utils.mjs'引用的模块'lodash/pickBy.js'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

▲ [警告] 被'node_modules/@aws-amplify/ui/dist/esm/validators/index.mjs'引用的模块'lodash/merge.js'不是ESM

  CommonJS或AMD依赖可能导致优化中断。

解决步骤 #

1. 优先升级依赖到ESM版本

逐个检查上述警告里的依赖包，确认是否有支持ESM的新版本（看包的package.json是否包含"type": "module"字段，或提供了ES模块入口）。如果有，直接执行npm install <包名>@latest升级，大部分官方包会逐步修复模块格式问题。

2. 配置Angular允许CommonJS依赖

如果部分依赖没有ESM版本，或升级后仍有警告，可以修改angular.json，在构建配置里添加allowedCommonJsDependencies字段，把这些依赖列进去，告诉Angular允许它们作为CommonJS依赖，消除警告：

"architect": {
  "build": {
    "options": {
      // 其他已有的配置项...
      "allowedCommonJsDependencies": [
        "amazon-quicksight-embedding-sdk",
        "qrcode",
        "ts-access-control",
        "style-dictionary",
        "lodash/kebabCase",
        "lodash/pickBy",
        "lodash/merge",
        "google-libphonenumber",
        "@aws-crypto/sha256-js"
      ]
    }
  }
}

3. 替换为ESM替代模块

部分包有专门的ESM版本，比如lodash可以换成lodash-es（纯ESM实现）。如果项目里用的是lodash的单个方法，比如kebabCase，可以安装lodash-es，然后把导入语句改成：

import kebabCase from 'lodash-es/kebabCase';

这样就能用ESM版本，避免CommonJS相关警告。

说明 #

这些警告不会导致构建失败或项目无法运行，但可能影响构建优化效果（比如树摇不彻底，打包体积偏大），所以优先尝试升级或替换模块，最后再用配置允许的方式处理。

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