如何在 Angular 中获取文件哈希名称？

Question

在 Angular 4 中，我使用了 Webpack 的（甚至 File-loader 的）require 方法来获取图像哈希名称：

const versionedName = require('assets/images/icn-copy.svg');

它 returns 类似“assets/images/icn-copy.435435fj5435f345345f435f435f345f.svg”的东西 - 散列文件名。我可以用它来请求服务器。但是在迁移到 Angular 6 之后，require 函数开始返回带有属性 “default” 的对象，其中包含 not 散列名称。

如何在 Angular 6 及更高版本中获取散列名称？

更新： 我注意到迁移后的图像现在根本没有散列。这可能是原因。例如

.loader {
    background-image: url('assets/images/spinner.svg');
...
}

在根中仅产生 spinner.svg 而不是 spinner.214312fe21fe412f4ef.svg

更新 2：由于问题现在已解决，我很乐意听到更好的绕过图像缓存的方法。 require() 绝对不是最好的方法。这与资产中的图像无关。这是关于请求的。例如：

this.http.get('assets/images/spinner.svg') // will be cached
this.http.get('assets/images/spinner.214312fe21fe412f4ef.svg') // will NOT be cached.

Answer 1

问题是从 Angular 6 开始默认禁用散列。添加标志 --output-hashing=all 解决了这个问题。值得一提的是，现在 Typescript 2.7 允许默认导入 CommonJS/AMD/UMD (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#support-for-import-d-from-cjs-from-commonjs-modules-with---esmoduleinterop)。这意味着 require() 现在 returns 不是具有完整文件名的字符串，而是 object 和属性默认包含此 string。而不是

icn-copy.435435fj5435f345345f435f435f345f.svg

现在：

{
    default: "icn-copy.435435fj5435f345345f435f435f345f.svg"
}

但我仍然需要更好的解决方案！（查看更新 2）

如何在 Angular 中获取文件哈希名称？

How to get file hash name in Angular?

javascript

typescript

webpack

webpack-file-loader

angular