В настоящее время мы работаем над новым проектом с регулярными обновлениями, которым ежедневно пользуется один из наших клиентов. Этот проект разрабатывается с использованием angular 2, и мы сталкиваемся с проблемами кеширования, то есть наши клиенты не видят последних изменений на своих машинах.
В основном файлы html / css для файлов js, кажется, обновляются должным образом, не доставляя особых проблем.
ng build
добавлением-prod
тега к сгенерированным именам файлов добавляется хеш. Это заставляет перезагрузить все, кромеindex.html
. В этом сообщении на github было несколько советов по перезагрузке.Ответы:
angular-cli решает эту проблему , предоставляя
--output-hashing
флаг для команды сборки (версии 6/7, более поздние версии см. здесь ). Пример использования:Объединение и встряхивание дерева предоставляет некоторые детали и контекст. Идет
ng help build
, документирует флаг:Хотя это применимо только к пользователям angular-cli , оно работает блестяще и не требует каких-либо изменений кода или дополнительных инструментов.
Обновить
В ряде комментариев полезно и правильно указано, что этот ответ добавляет хеш к
.js
файлам, но ничего не делает для нихindex.html
. Поэтому вполне возможно, что файлыindex.html
останутся кешированными после того, какng build
кеш-.js
файлы будут заблокированы.На этом этапе я остановлюсь на том, как мы контролируем кеширование веб-страниц во всех браузерах?
источник
Нашел способ сделать это, просто добавьте строку запроса для загрузки ваших компонентов, например:
Это должно заставить клиента загрузить серверную копию шаблона, а не браузер. Если вы хотите, чтобы он обновлялся только через определенный период времени, вы можете использовать вместо этого ISOString:
И подставьте несколько символов, чтобы они изменились только через час, например:
Надеюсь это поможет
источник
templateUrl: './app/shared/menu/menu.html?v=' + Math.random()
В каждом шаблоне html я просто добавляю следующие метатеги вверху:
Насколько я понимаю, каждый шаблон является автономным, поэтому он не наследует мета-правила кеширования, установленные в файле index.html.
источник
Комбинация ответа @Jack и ответа @ ranierbit должна помочь.
Установите флаг сборки ng для --output-hashing так:
Затем добавьте этот класс в службу или в приложение.
Затем добавьте это к своим поставщикам в app.module:
Это должно предотвратить проблемы с кешированием на живых сайтах для клиентских машин.
источник
У меня была аналогичная проблема с кешированием index.html браузером или с более сложными средними cdn / прокси (F5 вам не поможет).
Я искал решение, которое на 100% проверяет наличие у клиента последней версии index.html, к счастью, я нашел это решение от Хенрика Пейнара:
https://blog.nodeswat.com/automagic-reload-for-clients-after-deploy-with-angular-4-8440c9fdd96c
Решение также решает случай, когда клиент остается с открытым браузером в течение нескольких дней, клиент проверяет наличие обновлений через определенные промежутки времени и перезагружается, если развернута более новая версия.
Решение немного сложное, но работает как шарм:
ng cli -- prod
создает хешированные файлы, один из которых называется main. [hash] .jsПоскольку решение Хенрика Пейнара было для angular 4, были внесены незначительные изменения, я также помещаю сюда исправленные скрипты:
VersionCheckService:
изменить на основной компонент приложения:
Скрипт после сборки, который делает волшебство, post-build.js:
просто поместите скрипт в (новую) папку сборки, запустите скрипт, используя
node ./build/post-build.js
после создания папки dist, используяng build --prod
источник
Вы можете управлять кешем клиента с помощью заголовков HTTP. Это работает в любой веб-платформе.
Вы можете установить директивы этих заголовков, чтобы иметь точный контроль над тем, как и когда включать | отключать кеш:
Cache-Control
Surrogate-Control
Expires
ETag
(очень хороший)Pragma
(если вы хотите поддерживать старые браузеры)Хорошее кэширование - это хорошо, но очень сложно во всех компьютерных системах . Взгляните на https://helmetjs.github.io/docs/nocache/#the-headers для получения дополнительной информации.
источник