如何防止index.html在Angular 10中缓存和显示旧的.js文件



虽然有很多类似的问题,但没有一个能解决我的问题。我有一个正在运行的web服务器,它需要每天新建,因此许多内容都在定期更改。但每当我部署任何新的构建版本时,浏览器都会用旧的js、css文件缓存旧的index.html。因此,尽管添加到代码中,客户端甚至看不到更新的更改,这非常令人沮丧。我添加了http equiv="高速缓存控制";content=";没有缓存,没有存储,必须重新验证">但不适合我注意-只有一个解决方法,即如果我从浏览器手动禁用缓存,即使我多次刷新页面,浏览器也会显示旧的index.html文件

如果我需要做什么,请告诉我-

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="stylesheet" href="styles.13f59921f8d74cebb499.css"></head>
<body>
<script src="assets/js/moment.js"></script>
<script src="assets/js/moment-timezone.js"></script>
<app-root></app-root>
<script src="runtime.7d4733d55376630cf00a.js" defer></script><script src="polyfills-es5.950ea5f001d77cff122d.js" nomodule defer></script><script src="polyfills.05dd00906ab9ae4ef80e.js" defer></script><script src="main.3490618dde062e2d93a4.js" defer></script></body>
</html>

Angular版本-角度版本

您需要更新缓存,这对于Service Worker来说是一项不错的工作。在你的项目中实施一个。https://blog.angular-university.io/angular-service-worker/在实现它之后,您可以访问SwUpdate和实现一(PWA的东西(附带的所有其他好处。

一旦获得更新,就会出现新的构建,并且可以使用新的ngsw.json部署新版本后的第一个应用程序重新加载-Angular Service Worker检测到新的ngsw.json并在后台加载任何新文件新版本部署后的第二次重新加载-用户看到新版本这种行为将持续工作,与用户打开的选项卡数量无关(与标准Service Worker生命周期不同(。

另外,在发布新版本时,不要忘记更新package.json版本号。

最新更新