Как сделать так, чтобы угловые клики позволяли мне загружать значок, используя хэш контента для его имени? - PullRequest
Новая
       8

Как сделать так, чтобы угловые клики позволяли мне загружать значок, используя хэш контента для его имени?

0 голосов
/ 20 января 2019

Я хочу кэшировать favicon своих сайтов так же, как я кеширую css / js / png на своем сайте, например, с заголовком expires в далеком будущем.Однако я не вижу, как это сделать.Все статьи, которые я нахожу на favicon и angular, предлагают просто использовать ссылку на html-странице, поместить favicon.ico в ресурсы и копировать с помощью опции компоновщика ресурсов.

<link rel="icon" type="image/x-icon" href="favicon.ico">

Это не даст того, чего я хочу, так как файл называется "favicon.ico".Я хочу, чтобы он назывался "favicon. [Content hash] .ico", так же как и все файлы js, css и png.

Я нашел эту статью Как изменить favicon Angular CLI, и попробовал метод faviconInitFactory, упомянутый в одном из комментариев.Я думаю, что это «правильный» способ решения этой проблемы, но он не будет работать для меня.

Если я просто использую эту строку, то angular жалуется, что не знает, как загрузитьico file 

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}`);

я получаю "значение для установки", а затем некоторыесимволы Юникода.Я принимаю это, чтобы означать, что файл был загружен в двоичном формате вместо встроенной базы 64.Я понял, что это потому, что содержимое файла невелико (6 КБ), поэтому загрузчик их вставляет.Однако они действительно загружаются как двоичные файлы, а не как base64.

Итак, резюмируя, я не хочу обслуживать файл "favicon.ico", я хочу обслуживать один "favicon. [Content hash].ICO».В статье показано, как динамически обращаться к этому файлу, но я не вижу, как настроить загрузчики angular cli для загрузки в формате base 64 или URL-адреса.

1 Ответ

0 голосов
/ 19 февраля 2019

Никто не предложил ответ, и я не нашел его.Лучшее, что я мог придумать, - это вручную выполнить процесс, то есть вычислить md5 значка, а затем обновить страницу, чтобы найти это.Если значок меняется, то мы можем изменить имя, и оно просто работает. 

CertUtil -hashfile .\favicon.ico MD5
MD5 hash of .\favicon.ico:
b9aa7c338693424aae99599bec875b5f

Затем мы переименовываем файл в «favicon.b9aa7c338693424aae99599bec875b5f.ico» и обновляем страницу HTML, чтобы ссылаться на нее. 

<link rel="icon" type="image/x-icon" href="favicon.b9aa7c338693424aae99599bec875b5f.ico">
...