在 Angular 中清除浏览器缓存

Question

我经常更新的 Angular 应用程序有问题。

我想避免浏览器缓存，我正在尝试几种替代方法，但它们都不起作用。

第一件事是我很难测试解决方案是否有效，因为当我上传新版本时，有时我只需刷新页面就可以看到它，而其他时候我需要打开控制台并强制刷新清空缓存。

我尝试在请求标头中包含 Cache-Control: no-cache，正如您在图像中看到的那样，但这对我不起作用。

我也试过了，把app.component.ts放进去

templateUrl: './app.component.html? v1'

正如我在 some answers 中看到的那样，但两者都没有。

事实是我很绝望，因为当我提供一些我认为有效的东西时，当我与我的老板核对它时，他并没有刷新它:-(，糟糕的是，正如我所说我不知道如何真正检查，每次我进入网络时，都会从服务器请求最新版本。

感谢您的帮助

Answer 1

当您使用 ng build 构建应用程序时，您应该使用以下标志：

--outputHashing=all

这是为了启用缓存清除。这会为每个构建的文件添加一个哈希，这样每当您将新版本上传到服务器时，浏览器就会强制加载最新版本。

因此，一种方法是运行它：

ng build --prod --outputHashing=all

您可以通过here 阅读有关构建选项标志的更多信息。

如果您不希望在运行 ng build 时附加标志，则应在 angular.json 文件的配置中设置它。

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
     .
     .
     .
  }
}

Answer 2

试试[window.]location.reload(true):

if (localStorage.getItem('refreshed') === null) {
    localStorage['refreshed'] = true;
    window.location.reload(true);
} else {
    localStorage.removeItem('refreshed');
}

根据w3schools：

默认情况下，reload() 方法从缓存中重新加载页面，但您可以通过将 forceGet 参数设置为 true 来强制它从服务器重新加载页面：location.reload(true)。

Answer 3

我还每天更新我的应用程序，我用它来通知用户应用程序已过时并请求刷新页面。

constructor(
    private swUpdate: SwUpdate,){

    public checkForUpdates(): void {
    this.updateSubscription = this.swUpdate.available.subscribe(event => this.promptUser());

    if (this.swUpdate.isEnabled) {
      // Required to enable updates on Windows and ios.
      this.swUpdate.activateUpdate();
      interval(300000).subscribe(() => {
        this.swUpdate.checkForUpdate().then(() => {
         console.log('checked for updates');
        });
      });
    }}

    // Important: on Safari (ios) Heroku doesn't auto redirect links to their-
    //https which allows the installation of the pwa like usual
    // but it deactivates the swUpdate. So make sure to open your pwa on safari
    //like so: https://example.com then (install/add to home)
    
      }

      promptUser(): void {
        this.swUpdate.activateUpdate().then(() => {
          const snack = this.snackbar.open('A New Update Is Available Click To 
          Reload', 'Reload');
          snack
            .onAction()
            .subscribe(() => {
              window.location.reload();
            })

  
 

       });
      }

Answer 4

您可以使用以下命令强制页面重新加载：

window.location.replace('/path');