Angular 17+esbuild环境下如何移除chunk文件名中的哈希值

针对开发模式下Angular Elements懒加载chunk带哈希导致无法固定引用的问题，可以通过以下配置修改解决：

方法一：修改angular.json的开发环境构建配置 #

在项目的angular.json文件中，找到对应项目的构建配置，为开发环境添加outputHashing和chunkNames配置：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "configurations": {
          "development": {
            "outputHashing": "none",
            "chunkNames": "[name]"
          }
        }
      }
    }
  }
}

• outputHashing: "none"会禁用所有输出文件的哈希命名
• chunkNames: "[name]"指定懒加载chunk仅使用文件原名，不添加哈希后缀

方法二：通过esbuildOptions自定义chunk命名 #

如果需要更精细的控制，可以直接在构建选项中配置esbuild的chunk命名规则：

"projects": {
  "你的项目名称": {
    "architect": {
      "build": {
        "options": {
          "esbuildOptions": {
            "chunkNames": "[name]"
          }
        },
        "configurations": {
          "development": {
            "outputHashing": "none"
          }
        }
      }
    }
  }
}

配置完成后，重启开发服务器，懒加载的chunk文件名就会去掉哈希后缀，变回类似test.js的形式，你可以在HTML中固定引用该脚本，无需担心组件更新后文件名变化的问题。

注：生产环境建议保留哈希命名以实现缓存优化，上述配置仅针对开发环境生效即可。

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