Question

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

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

它返回类似于“ assets/images/icn-copy.435435fj5435f345345f435f435f345f.svg”的内容-哈希文件名。我可以用它来请求服务器。但是在迁移到Angular 6之后，要求函数开始返回属性为“ default”的对象，该对象包含不哈希名称。

如何在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()现在不返回具有完整文件名的字符串，而是返回object，其属性默认包含此string。代替

icn-copy.435435fj5435f345345f435f435f345f.svg

现在：

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

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

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

1 个答案: