部署后强制浏览器更新Angular/Ionic项目的翻译JSON文件

针对你遇到的ngx-translate翻译JSON文件无法随部署更新的问题，以下是几种可行的解决方案：

1. 将翻译文件打包进JS bundle（推荐） #

把翻译JSON文件直接导入并打包到应用的JS chunk中，借助Angular自带的文件名哈希机制，确保每次更新都会触发浏览器拉取新资源。

实现步骤：

• 自定义静态翻译加载器，直接导入翻译文件：

  import { TranslateLoader } from '@ngx-translate/core';
  import { Observable, of } from 'rxjs';
  // 导入你的翻译文件
  import enTranslations from './assets/i18n/en.json';
  import zhTranslations from './assets/i18n/zh.json';
  
  export class StaticTranslateLoader implements TranslateLoader {
    getTranslation(lang: string): Observable<any> {
      switch (lang) {
        case 'zh':
          return of(zhTranslations);
        case 'en':
          return of(enTranslations);
        default:
          return of(enTranslations);
      }
    }
  }
  

• 在AppModule中替换默认的HttpLoader：

  import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
  import { StaticTranslateLoader } from './static-translate.loader';
  
  @NgModule({
    imports: [
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useClass: StaticTranslateLoader
        }
      })
    ]
  })
  export class AppModule {}
  

这种方式无需额外配置缓存，翻译内容会随JS bundle一起更新，适合翻译文件体积不大的场景。

2. 配置Firebase Hosting缓存规则 #

直接针对翻译JSON文件设置强制不缓存的响应头，让浏览器每次请求都从服务器拉取最新版本。

修改firebase.json的hosting配置：

"hosting": {
  "public": "dist/your-app-directory",
  "headers": [
    {
      "source": "/assets/i18n/*.json",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-cache, no-store, must-revalidate"
        },
        {
          "key": "Pragma",
          "value": "no-cache"
        },
        {
          "key": "Expires",
          "value": "0"
        }
      ]
    }
  ]
}

部署后，Firebase会自动为匹配的JSON文件添加这些响应头，避免浏览器缓存旧内容。

3. 给翻译文件URL添加版本参数 #

通过在请求URL后追加版本号或构建哈希，让浏览器识别为新资源，从而拉取最新文件。

实现步骤：

• 在environment.ts中添加版本号（部署时手动更新或通过构建脚本自动生成）：

  export const environment = {
    production: true,
    appVersion: '1.0.1' // 每次部署更新此值
  };
  

• 修改HttpLoaderFactory，在URL中拼接版本参数：

  import { HttpClient } from '@angular/common/http';
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  import { environment } from '../environments/environment';
  
  export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', `.json?v=${environment.appVersion}`);
  }
  

如果希望自动生成版本号，可以在构建脚本中用Git Commit Hash作为版本，比如在package.json中添加构建命令：

"scripts": {
  "build:prod": "ng build --configuration production --output-hashing all && node -e \"require('fs').writeFileSync('./src/environments/environment.prod.ts', 'export const environment = { production: true, appVersion: '\\'' + require('child_process').execSync('git rev-parse --short HEAD').toString().trim() + '\\'' };')\""
}

内容的提问来源于stack exchange，提问作者slhn.dev