Angular中ngx-translate在非默认端口加载JSON文件的配置问题

你遇到的这个问题我之前也碰到过，核心原因就是TranslateHttpLoader的请求路径没有正确适配当前应用的非默认端口，下面给你几个靠谱的解决办法：

• 优先用相对路径配置TranslateHttpLoader
  这是最常见的解决方式，只要路径用./开头的相对路径，就能自动继承当前应用的端口、域名等信息，不会硬编码到80端口。你可以把你的HttpLoader工厂函数改成这样：

  import { HttpClient } from '@angular/common/http';
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  
  export function HttpLoaderFactory(http: HttpClient) {
    // ./开头的相对路径会基于当前应用的URL（比如http://localhost:8090）请求文件
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }
  

  千万别写死绝对路径（比如http://localhost/assets/i18n/），这种写法直接绑定了80端口，肯定会报404。

• 动态获取当前应用的Origin（兜底方案）
  如果相对路径还是不生效，可能是你的应用base href配置有特殊情况，这时候可以动态获取当前页面的完整Origin（协议+主机+端口），再拼接翻译文件路径：

  export function HttpLoaderFactory(http: HttpClient) {
    // 自动获取当前应用的完整地址，比如http://localhost:8090
    const currentOrigin = window.location.origin;
    return new TranslateHttpLoader(http, `${currentOrigin}/assets/i18n/`, '.json');
  }
  

  这种方式能100%保证请求指向当前运行的端口，完全避免端口不匹配的问题。

• 确认应用启动命令与base href配置
  先确保你是用指定端口启动Angular应用的：

  ng serve --port 8090
  

  如果是生产构建后部署，要保证构建时的--base-href参数正确（一般设为/即可）：

  ng build --prod --base-href /
  

  错误的base href会导致相对路径解析异常，进而让请求跑到错误的端口上。

• 最后检查浏览器缓存
  有时候浏览器缓存了旧的请求地址，就算你改了配置，也可能暂时看不到效果。这时候可以清空浏览器缓存，或者用Ctrl+F5强制刷新页面，再测试翻译文件的加载情况。

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