Ngx-translate如何修改TranslateService本地化文件加载路径

完全可以自定义ngx-translate加载语言包的路径，默认的src/assets/i18n/[lang].json路径是内置TranslateHttpLoader的预设值，并非TranslateService写死的规则，调整方式如下：

方法1：修改默认HttpLoader的路径参数 #

绝大多数场景下不需要重写加载逻辑，只需要在实例化TranslateHttpLoader时传入自定义路径前缀、后缀即可：

• TranslateHttpLoader构造函数接收3个参数：
  • 第一个为必填的HttpClient实例
  • 第二个为语言文件路径前缀，默认值是./assets/i18n/
  • 第三个为语言文件后缀，默认值是.json

配置示例：

// AppModule内定义加载器工厂函数
export function TranslateHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(
    http,
    './assets/locales/lang-files/', // 替换为目标自定义路径，也支持填写CDN等绝对路径
    '.json'
  );
}

@NgModule({
  imports: [
    // ...其他模块导入
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: TranslateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ]
})
export class AppModule {}

配置注意事项 #

• 路径填写以Angular应用部署后的访问路径为准，源文件存放在src下的目录，编译后不会保留src层级
• 如果把语言包放在assets目录以外的位置，需要在angular.json的build.options.assets数组中添加对应目录，否则编译时不会将语言包文件输出到部署目录，访问时会报404错误

方法2：自定义加载器实现复杂加载逻辑 #

如果需要实现更灵活的加载规则（比如按模块拆分语言包、从后端接口拉取翻译内容、给文件加版本号防缓存），可以自定义实现TranslateLoader接口，完全控制加载逻辑：

@Injectable()
export class CustomTranslateLoader implements TranslateLoader {
  constructor(private http: HttpClient) {}

  getTranslation(langCode: string): Observable<Record<string, string>> {
    // 此处可自由定义路径拼接、请求逻辑
    const fileUrl = `./static/translations/${langCode}.json?v=${APP_VERSION}`;
    return this.http.get<Record<string, string>>(fileUrl);
  }
}

// 模块内注册自定义加载器
@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: CustomTranslateLoader
      }
    })
  ]
})
export class AppModule {}

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