Angular(v12) Universal网站浏览器缓存旧版本问题求助

1. 启用Angular CLI哈希文件名（核心方案） #

Angular CLI原生支持给打包资源自动添加内容哈希后缀（如main.abc123.js），内容变更时哈希值自动更新，浏览器会识别为新资源。无需手动加时间戳，直接在angular.json的build配置中设置：

"build": {
  "options": {
    "outputHashing": "all"
  }
}

Universal服务端构建也需同步配置该选项，确保客户端与服务端资源文件名一致。

2. 配置服务器端缓存策略（关键补充） #

仅前端修改不够，必须配合服务器缓存头规则：

• index.html：设置Cache-Control: no-cache, no-store, must-revalidate，强制浏览器每次请求最新入口文件，避免入口被缓存导致旧资源引用无法更新。
• 带哈希的静态资源：设置Cache-Control: public, max-age=31536000, immutable，允许长期缓存，因为哈希变更才会生成新文件，无缓存冲突。

以Express（Universal默认服务端框架）为例，在server.ts中添加中间件配置：

import { join } from 'path';
import * as express from 'express';

const DIST_FOLDER = join(process.cwd(), 'dist');

// 处理HTML文件的缓存规则
app.get('*.html', (req, res, next) => {
  res.set('Cache-Control', 'no-cache, no-store, must-revalidate');
  next();
});

// 处理静态资源的缓存规则
app.use(express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y',
  index: false,
  setHeaders: (res, path) => {
    // 匹配带哈希的资源文件
    if (path.match(/\.[0-9a-f]{8,}\.(js|css|png|jpg)$/)) {
      res.set('Cache-Control', 'public, max-age=31536000, immutable');
    }
  }
}));

3. 移除手动时间戳配置 #

手动给JS文件加?t=xxx的方式存在缺陷：若index.html被缓存，时间戳参数无法更新，反而可能与CLI哈希机制冲突，建议直接移除该手动操作。

4. 版本检测兜底方案 #

添加应用版本检测逻辑，确保用户强制刷新：

1. 在assets目录创建version.json，每次发布更新版本号：

{"version": "20221115"}

2. 在AppComponent中加入版本对比逻辑（仅在浏览器端执行）：

import { Component, OnInit, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      fetch('/assets/version.json')
        .then(res => res.json())
        .then(data => {
          const currentVersion = data.version;
          const storedVersion = localStorage.getItem('appVersion');
          if (storedVersion !== currentVersion) {
            localStorage.setItem('appVersion', currentVersion);
            window.location.reload(true);
          }
        })
        .catch(err => console.error('版本检测失败', err));
    }
  }
}

5. 修正meta标签的无效问题 #

index.html中的缓存meta标签优先级低于服务器返回的HTTP缓存头，仅靠meta标签无法解决缓存问题，需重点依赖服务器端的Cache-Control配置。

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