如何无需重新编译部署Angular4应用修改ngx-translate翻译JSON文件？

首先，你当前用的TranslateHttpLoader本来就是从静态资源目录加载翻译文件的，只要保证这些JSON文件在部署后是可直接访问和修改的独立文件，而不是被打包进Angular的bundle里，就能实现无需重新编译部署修改翻译内容的需求。

具体步骤： #

1. 确认你的翻译文件路径配置
   从你贴的代码来看，TranslateHttpLoader默认的加载路径是./assets/i18n/，后缀是.json，所以你的en.json应该放在项目的src/assets/i18n/目录下。Angular编译时会自动把这个目录复制到dist/assets/i18n/下，部署后这个目录里的JSON文件是独立的静态资源，完全可以直接修改。

2. 修改部署服务器上的翻译文件
   找到你部署服务器上对应路径的en.json文件（比如用Nginx部署的话，路径可能是/usr/share/nginx/html/assets/i18n/en.json），直接把内容从：

   {"hello": "Hello World"}
   

   修改为：

   {"hello": "Good Morning"}
   

3. 处理浏览器缓存问题（关键！）
   这里要注意：浏览器会默认缓存静态JSON文件，所以你修改完服务器上的文件后，用户可能刷新页面还是看不到变化。解决这个问题有两个常用方案：

   • 方案一：给翻译请求加缓存戳
     修改你的createTranslateLoader函数，在请求URL后加上时间戳或者版本号参数，强制浏览器每次都拉取最新文件：

     export function createTranslateLoader(http: HttpClient) {
       // 用当前时间戳作为缓存戳，每次页面刷新都会请求最新的翻译文件
       return new TranslateHttpLoader(http, './assets/i18n/', '.json?' + new Date().getTime());
     }
     

     这个方案适合需要频繁修改翻译内容的场景，缺点是每次刷新都会重新请求翻译文件。

   • 方案二：服务器端配置缓存策略
     在你的部署服务器（比如Nginx、Apache）上，给assets/i18n/下的JSON文件设置不缓存或者短缓存的响应头。以Nginx为例，在配置文件里添加：

     location ~* \/assets\/i18n\/.*\.json$ {
       add_header Cache-Control "no-cache, no-store, must-revalidate";
       add_header Pragma "no-cache";
       add_header Expires 0;
     }
     

     这样浏览器每次请求这些文件时，都会先检查服务器上的文件是否更新，避免旧缓存干扰。

4. 验证效果
   修改完服务器上的en.json后，刷新前端页面，就能看到页面上的内容从"Hello World"变成"Good Morning"了，全程不需要重新编译或部署Angular应用。

注意事项 #

一定要确保你的i18n目录是在assets下，并且Angular的angular.json配置里没有把这个目录排除在静态资源之外（默认是包含的）。如果翻译文件被错误打包进了main.js等bundle文件里，那修改就必须重新编译了。

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