我想要像缓存CSS/JS/PNG一样缓存我的网站Favicon，例如使用远期过期头，但是我不知道如何实现。所有我在Favicon和Angular方面找到的文章都建议在HTML页面中使用链接，在assets中放置favicon.ico文件，并使用assets构建器选项进行复制。
这并不能达到我的目的，因为该文件名为“favicon.ico”。 我希望它被称为“favicon。[content hash] .ico”，就像所有js、css和png文件一样。
我找到了这篇文章如何更改Angular CLI网站图标，并尝试了其中一个评论中提到的faviconInitFactory方法。 我认为这是解决此问题的“正确”方法，但对我无效。
如果我只使用这行代码，则Angular会抱怨不知道如何加载ico文件。
作为替代方案，我尝试使用以下导入方式。
我随后使用了“custom-webpack:browser”和一个Webpack文件。
这使我进一步了解了情况，但当我运行应用并加载页面时，尝试使用以下方式记录它们，但无法成功：
我收到了“设置网站图标为”和一些Unicode符号。我认为这意味着文件已经被二进制加载，而不是base64内联。我明白这是因为文件内容很小（6kb），所以加载器正在将它们内联。但是它们确实被作为二进制加载，而不是base64。
因此，简要概括一下，我不想提供一个名为“favicon.ico”的文件，我想提供一个名为“favicon.[content hash].ico”的文件。本文展示了如何动态引用此文件，但我看不到如何配置Angular CLI的加载器以作为base64或URL加载。
<link rel="icon" type="image/x-icon" href="favicon.ico">
这并不能达到我的目的，因为该文件名为“favicon.ico”。 我希望它被称为“favicon。[content hash] .ico”，就像所有js、css和png文件一样。
我找到了这篇文章如何更改Angular CLI网站图标，并尝试了其中一个评论中提到的faviconInitFactory方法。 我认为这是解决此问题的“正确”方法，但对我无效。
如果我只使用这行代码，则Angular会抱怨不知道如何加载ico文件。
const favicon = require('../assets/favicon.ico');
ERROR in ./src/assets/favicon.ico
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
作为替代方案，我尝试使用以下导入方式。
import favicon from '!raw-loader!../assets/favicon.ico';
我随后使用了“custom-webpack:browser”和一个Webpack文件。
module.exports = {
module: {
rules: [
{
test: /\..ico$/,
use: [
{
loader: 'file-loader',
}
]
}
]
}
}
这使我进一步了解了情况，但当我运行应用并加载页面时，尝试使用以下方式记录它们，但无法成功：
console.log(`setting favicon to ${favicon}`);
我收到了“设置网站图标为”和一些Unicode符号。我认为这意味着文件已经被二进制加载，而不是base64内联。我明白这是因为文件内容很小（6kb），所以加载器正在将它们内联。但是它们确实被作为二进制加载，而不是base64。
因此，简要概括一下，我不想提供一个名为“favicon.ico”的文件，我想提供一个名为“favicon.[content hash].ico”的文件。本文展示了如何动态引用此文件，但我看不到如何配置Angular CLI的加载器以作为base64或URL加载。