Angular4始终要求浏览器缓存清理

我在生产环境中有一个web应用程序。用户每天都在使用它，当我发布更新时，用户返回到web应用程序，他/她查看web应用程序的旧版本。他需要刷新浏览器以加载新版本。我怎样才能解决这个问题？我无法告诉数百名用户在每次发布更新时刷新页面（每周3-4次）。 我使用以下方法构建前端应用程序：Angular4和angular cli

如中所述，有两种方法可以启用缓存破坏

--prod或--target=production将设置许多标志，包括--output hashing=all，这是触发缓存破坏的原因

您还可以在命令行上使用[none | all | media | bundles]的一个可能值设置--output散列本身。这对于测试/暂存构建非常有用

---

清理浏览器缓存的最佳方法是在构建时使用哈希。用于在angular cli应用程序中添加哈希的命令为

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

每次构建时，它将生成具有不同名称的构建文件

为了防止您不使用angular cli，您可以通过这种方式声明组件以进行缓存破坏

@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

要编辑配置文件，请添加以下行以设置缓存设置（&D）

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

这会将过期时间设置为3天。因此，浏览器将自动删除您的web应用程序的所有存储缓存并下载新副本

---

jpg | jpeg | png | gif | ico | css | js如果您使用

ng构建——观察

将命令更改为：

ng build--watch--output hashing=all

---

这将通过散列js名称来缓存所有js。

对于npm，请使用以下命令：7+

RUN npm run build -- --prod --output-hashing=all

---

是否使用webpack进行发布？使用ng build时是否使用--target=production标志？这将在捆绑文件的末尾添加一个破坏缓存的字符串。我将尝试这样做。此外，我还使用了set Interval方法来调用特定的服务。我已经将其设置为组件的ngOnInit（）方法。但问题是，只有当我使用F12浏览器按钮时，它才起作用。如果您使用angular cli，并且在创建生产生成文件时，它每次都会自动创建具有不同名称的捆绑文件。您只需在index.html中放置一些元标记，这样您的浏览器就不会缓存您的index.html文件。您的问题已经解决。这个命令正确吗“--目标=生产“适用于您@Ashish chauhan，但是如何缓存'Index.html'文件的爆破？@Karthikvenkat86您不缓存索引文件，浏览器通常不会缓存HTML。如果您点击“重新加载”，则应以最大年龄0请求索引文件，因此一般来说，这应该是一个问题

--输出哈希

选项已消失，

--prod

将永远花费（35秒，而仅aot为8秒）！希望有一种方法可以只添加一个随机id。很抱歉，我必须同时执行两个操作（生成和服务器配置）还是其中一个操作？@LunaticJape只是其中一个操作我尝试了

build--out hashing=all

，但我仍然必须使用不带缓存的刷新来显示网站上的更改。这在docker容器中有效吗？@LunaticJape我从来没有用过docker。但即使在使用ng build命令后，您也必须刷新web应用程序或重新打开web应用程序以查看最新的更改。没有直接的方法可以实时看到您的变化。