Angular 7应用服务器更新代码后缓存未自动刷新问题求助

Hey there! Let's work through this frustrating caching problem you're hitting with your Angular 7 app. I know how annoying it is to deploy updates and have users stuck with old content unless they force-refresh—even after using ng build --prod --output-hashing=all. Let's go through some actionable fixes:

1. Fix Server-Side Caching Policies (Most Likely Culprit) #

The --output-hashing=all flag adds unique hashes to your JS/CSS files, which should bypass cache—but if your server is still caching the index.html file (the entry point of your app), users will keep loading the old references to those hashed files. Here's how to fix this for common servers:

For Nginx: #

Add these rules to your server configuration to prevent caching index.html while allowing long-term caching for hashed assets:

# Serve index.html and disable caching for it
location / {
  try_files $uri $uri/ /index.html;
  add_header Cache-Control "no-cache, no-store, must-revalidate";
  add_header Pragma "no-cache";
  add_header Expires "0";
}

# Allow long-term caching for static assets with hashes
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
  add_header Cache-Control "public, max-age=31536000, immutable";
}

For Apache (using .htaccess): #

Add these directives to your project's .htaccess file:

# Disable caching for index.html
<Files "index.html">
  Header set Cache-Control "no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires "0"
</Files>

# Cache hashed assets long-term
<FilesMatch "\.(js|css|png|jpg|jpeg|gif|ico|svg)$">
  Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

2. Handle Service Worker Caching (If You're Using It) #

If you've added Angular's Service Worker to your app, it might be holding onto old cached assets even after deployment. Here's how to force it to check for updates:

First, make sure you've set up the Service Worker correctly (run ng add @angular/pwa if you haven't already). Then add this code to your root component to detect updates and prompt users to refresh:

import { Component, OnInit } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private swUpdate: SwUpdate) {}

  ngOnInit(): void {
    if (this.swUpdate.isEnabled) {
      // Check for updates on app load
      this.swUpdate.checkForUpdate().then(() => {
        this.swUpdate.available.subscribe(() => {
          if (confirm('A new version of the app is available! Would you like to update now?')) {
            window.location.reload();
          }
        });
      });
    }
  }
}

3. Add Manual Version Detection #

If server config changes aren't enough, you can implement a simple version check to prompt users to refresh when a new version is deployed:

1. Create an assets/version.json file in your project with a version number:

{"version": "1.0.2"}

2. Add this code to your root component to compare the deployed version with the user's cached version:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('/assets/version.json').subscribe((data: {version: string}) => {
      const savedVersion = localStorage.getItem('appVersion');
      if (savedVersion !== data.version) {
        localStorage.setItem('appVersion', data.version);
        if (confirm('The app has been updated! Please refresh to get the latest features.')) {
          window.location.reload(true); // Force full refresh
        }
      }
    });
  }
}

Just update the version number in version.json every time you deploy.

4. Verify Build Output Double-Check #

Quick sanity check: After running ng build --prod --output-hashing=all, make sure your dist folder has files with long, unique hashes in their names (like main.abc123.js). If not, double-check your angular.json configuration to ensure the outputHashing option is set to all for the production build.

内容的提问来源于stack exchange，提问作者Anil Thakur