Angular4 总是需要浏览器缓存清理答案

【问题标题】：Angular4 always require Browsers Cache CleanAngular4 总是需要浏览器缓存清理
【发布时间】：2017-11-26 12:54:57
【问题描述】：

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

【问题讨论】：

你使用 webpack 进行发布吗？
您在使用 ng build 时是否使用了 --target=production 标志？这将在捆绑文件的末尾添加一个缓存破坏字符串
我会试试这个。此外，我还使用 set Interval 方法来调用特定服务。我已将其设置为组件的 ngOnInit() 方法。但问题是它只有在我使用 F12 浏览器按钮时才有效。
如果您使用 Angular cli，并且当您创建生产构建文件时，它每次都会自动创建具有不同名称的捆绑文件。您只需在 index.html 中放置一些元标记，这样您的浏览器就不会缓存您的index.html 文件。您的问题已解决。
这个命令“--target=production”对你有用吗@Ashish chauhan

标签： angular angular-cli

【解决方案1】：

如angular-cli docs 中所述，有两种方法可以启用缓存清除。

--prod 或--target=production 将设置许多标志，包括触发缓存清除的--output-hashing=all
您还可以在命令行上设置 --output-hashing 自身，并使用 [none|all|media|bundles] 的可能值之一。这对于测试/暂存构建非常有用。

【讨论】：

但是，如何缓存 'Index.html' 文件？
@Karthikvenkat86 你不缓存索引文件，浏览器通常不会缓存 HTML。
如果你正在重新加载，那么索引文件应该使用 Max-Age: 0 请求，所以通常这应该是一个问题
--output-hashing 选项已经消失，--prod 需要永远（35 秒 vs 8 秒）！希望有一种方法可以选择添加随机 id。

【解决方案2】：

清理浏览器缓存的最佳方法是在构建时使用散列。在 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

编辑配置文件并添加这些行来设置缓存设置

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

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

jpg|jpeg|png|gif|ico|css|js

【讨论】：

很抱歉，我必须同时执行这两项操作（构建和服务器配置）还是其中一项？
@LunaticJape 只是其中之一
我尝试了build --out-hashing=all，但我仍然必须使用没有缓存的刷新来在网站上显示更改。这在 docker 容器中有效吗？
@LunaticJape 好吧，我从未使用过 docker。但即使在使用 ng build 命令后，您也必须刷新您的网络应用程序或重新打开您的网络应用程序以查看最新更改。没有直接的方法可以实时看到您的变化。

【解决方案3】：

如果您在使用时遇到缓存问题，这也很方便

ng build --watch

将您的命令更改为：

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

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

【讨论】：

【解决方案4】：

对于 npm，请使用以下内容：Angular 7 +

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

【讨论】：