Angular：在构建期间向资产中的文件添加散列答案

【问题标题】：Angular: Add hashing to the files in assets during buildAngular：在构建期间向资产中的文件添加散列
【发布时间】：2020-11-03 23:13:53
【问题描述】：

我一直在寻找解决方案，但没有找到任何有用的东西。

问题： 我有一个 Angular 应用程序，并且在我的资产文件夹中添加了自定义样式和脚本。我的资产文件夹的位置是 src->assets。我使用ng build --prod --output-hashing=all 构建我的项目，但这个命令的问题是它只对组件中使用的组件和图像进行哈希处理，而对所有其他文件（例如 CSS、js 文件和图像）进行哈希处理由 CSS 添加的内容不会在构建中进行哈希处理。

由于持续发布导致客户端出现问题，有时浏览器不会为新部署的版本刷新 CSS、JS 文件，并且他们抱怨样式和功能不起作用。

我尝试过的： 我尝试了很多上面提到的方法。

ng build --prod
output-hashing

但它们都没有对我有益。我想要的只是让我的自定义 css 和 js 文件在构建期间得到散列。有什么解决办法吗？

如有任何其他需要或我在我的问题中遗漏的问题，请随时提出

*编辑： * 已向here 提出类似问题，但尚未正确回答。

【问题讨论】：

理想情况下，您应该将您的 css 添加到 angular.json 样式数组，并将第 3 方 js 添加到脚本数组。如果你这样做，你就不会遇到这个问题。
@MikeOne 是的，我知道这一点。但是由于某些原因，我们必须将它们放在本地的 assets/css 文件夹中
好吧..在那种情况下，我猜你有 2 个选项..1）使用自定义 webpack 设置并使用 cachebuster 字符串进行后重写或 2）在服务器端解决它但设置 etags 或缓存具有缓存清理机制的标头。这两个选项都有点烂:-)
@MikeOne 这很有帮助。谢谢
我在混合应用程序中遇到了同样的问题，正如他们的文档描述的那样，将模板文件添加到“资产”中。我觉得这应该考虑清楚...

标签： angular typescript hash build versioning

【解决方案1】：

assets 文件夹中的资产不只是根目录中的文件。

如果您希望使用 --output-hashing=all 对文件进行哈希处理，请将它们放在根目录中，如下所示：

在 angular.json 中的 assest:[]

"assets": [
              "src/file.css",
              "src/file.js",
              "src/file.png",
              "src/assets",
              {
                "glob": "**/*",
                "input": "some/path",
                "output": "/"
              }
            ],

文件.css。 file.js、file.png 和 some/path 中的所有文件都将被复制到 dist/yourProjectName 并使用其内容的哈希值进行哈希处理。资产中的所有文件将保持原样。

【讨论】：

这不起作用。通过“资产”添加的文件不会通过 Webpack 加载器加载，也不会获得文件哈希。任何引用这些文件的模板都无法更改文件名。