Угловой4 всегда требуется очистка кэшей браузеров

У меня есть веб-приложение в рабочей среде. Пользователи используют его каждый день, когда я публикую обновление, и пользователь возвращается к веб-приложению, он просматривает старую версию веб-приложения. Он должен обновить браузер, чтобы загрузить новую версию. Как я могу решить эту проблему? Я не могу сказать, что сотни пользователей обновляют страницу каждый раз, когда я публикую обновление (3-4 раза в неделю). Я использовал следующее, чтобы построить мое приложение переднего конца: Angular4 с угловым cli

Ответ 1

Лучший способ очистить кеш браузера - использовать хеширование во время сборки. команда добавить хэширование в угловое приложение cli

ng build --prod --output-hashing=all

Он будет генерировать файл сборки с различным именем каждый раз, когда мы будем строить.

На всякий случай, если вы не используете угловые cli, вы можете объявить компонент таким образом, чтобы кэшировать busting

@Component({
  selector: 'some-component',
  templateUrl: './app/component/stuff/component.html?v=${new Date().getTime()}',
  styleUrls: ['./app/component/stuff/component.css?v=${new Date().getTime()}']
})

Также мы можем установить время истечения кеша на нашем сервере nginx. запустите эту команду

sudo nano /etc/nginx/sites-available/default

для редактирования файла конфигурации и добавления этой строки для установки настроек кеша

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 3d;
}

это установит срок действия до 3 дней. поэтому браузер автоматически удалит весь сохраненный кэш вашего веб-приложения и загрузит новую копию.

jpg | jpeg | png | gif | ico | css | js <- конфигурация будет кэшировать jpg/jpeg/png/gif/ico изображения, а также javascript

Ответ 2

Как отмечено в документах angular-cli, есть два способа включения перебора кеша.

--prod или --target = production задает несколько флагов, в том числе --output-hashing = все, что вызывает триггер
Вы также можете установить --output-hashing в командной строке с одним из возможных значений [none | all | media | bundles]. Это полезно для тестирования/промежуточной сборки.

Ответ 3

Это также удобно, если у вас есть проблемы с кешем при использовании

ng build --watch

Измените свою команду на:

ng build --watch --output-hashing=all

Это кэширует все ваши js путем хеширования имен js.