Angular 11修改ngx-translate的i18n文件夹位置后json文件404报错如何解决

云上老周

2026-9-26

问题根因

出现404错误是两个核心配置问题导致的：

Angular默认只会把assets目录下的文件作为静态资源打包到构建输出目录，你把i18n文件夹放在src/app下，构建后不会被输出到运行时可访问的路径，自然请求不到
当前配置的/globaltalentsystem/gts/src/i18n/是开发时的源码路径，不是项目运行时的静态资源访问路径，路径匹配失败返回404

解决方案步骤

方案1：移动i18n到assets目录（推荐，符合Angular官方规范）
把apps/globaltalentsystem/gts/src/app/下的i18n文件夹整体移动到apps/globaltalentsystem/gts/src/assets/目录下，确保构建时会被打包到输出目录的assets路径里。
之后修改translateLoaderFactory的路径配置：

export function translateLoaderFactory(httpClient: HttpClient) {
  // 项目部署在域名根路径用这个
  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');

  // 项目部署在域名子路径（比如/globaltalentsystem/根目录下）用这个
  // return new TranslateHttpLoader(httpClient, '/globaltalentsystem/assets/i18n/', '.json');
}

方案2：不移动i18n文件夹，修改Angular静态资源配置
如果不想调整i18n的存放位置，可以在workspace的angular.json配置中，找到对应项目的architect > build > options > assets数组，添加i18n目录的打包规则：
```
"assets": [
  "src/favicon.ico",
  "src/assets",
  // 新增配置，把src/app下的i18n目录打包到输出路径的assets/i18n下
  {
    "glob": "**/*.json",
    "input": "src/app/i18n/",
    "output": "/assets/i18n/"
  }
]
```
配置修改完成后，还是用方案1里的translateLoaderFactory路径配置即可。