Angular中如何本地化第三方库内容并按需加载其翻译文件

首先明确：可以加载第三方库的翻译文件，只要库本身提供了对应语言的翻译资源，或者你自行维护了对应库输出内容的翻译字典即可实现，以下是两种主流方案的具体实现方式：

• 提前整理第三方库的翻译文件：如果库官方提供了多语言资源包，直接将对应翻译文件存放到项目的 assets/i18n/vendor/[库名]/ 目录下；如果没有官方翻译，自行整理库输出内容的键值对翻译字典存到对应路径即可。
• 配置自定义翻译加载器，支持合并多份翻译资源：

import { MultiTranslateHttpLoader } from "ngx-translate-multi-http-loader";
import { HttpClient } from "@angular/common/http";

// 自定义Loader支持同时加载主应用和第三方库的翻译资源
export function TranslateLoaderFactory(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    {prefix: './assets/i18n/main/', suffix: '.json'}, // 主应用翻译路径
  ]);
}

• 按需加载逻辑实现：在用到对应第三方库的懒加载模块中，动态加载对应语言的翻译文件，合并到全局翻译字典中：

import { TranslateService } from "@ngx-translate/core";
import { HttpClient } from "@angular/common/http";

constructor(
  private translate: TranslateService,
  private http: HttpClient
) {
  const currentLang = this.translate.currentLang || 'zh-CN';
  // 动态加载当前语言下对应第三方库的翻译文件
  this.http.get(`./assets/i18n/vendor/[库名]/${currentLang}.json`)
    .subscribe(translation => {
      // 第三个参数为true表示合并翻译，不会覆盖主应用已有的翻译内容
      this.translate.setTranslation(currentLang, translation, true);
    });
}

• 如果第三方库本身就是基于 ngx-translate 开发的，翻译合并完成后库的输出内容会自动生效，不需要额外适配。

Angular 官方i18n分为编译时翻译和运行时翻译两种模式，按需加载更适合运行时翻译场景：

• 首先确认第三方库是否支持 @angular/localize，即库代码中已经用 $localize 标记了所有需要翻译的字符串，同时官方提供了对应语言的翻译文件。
• 运行时模式下按需加载逻辑：在用到对应第三方库的懒加载模块中，动态导入翻译资源并注入到全局翻译上下文中：

import { loadTranslations } from '@angular/localize';

constructor() {
  const currentLang = localStorage.getItem('currentLang') || 'zh-CN';
  // 动态导入对应库当前语言的翻译文件
  import(`../assets/i18n/vendor/[库名]/${currentLang}.json`)
    .then(translationModule => {
      loadTranslations(translationModule.default);
    });
}

• 如果使用的是AOT编译时翻译模式，需要在编译阶段就把第三方库的翻译文件和主应用的翻译文件合并，打包为对应语言的独立应用包；这种场景下的按需加载需要配合路由懒加载，将第三方库关联的业务模块拆分为独立chunk，加载对应语言的chunk时会自动载入翻译资源。

补充说明：部分第三方库（如ng-zorro-antd、Angular Material）自带独立的国际化服务，这种场景下直接调用库官方提供的setLocale类API，按需加载对应语言包即可，不需要额外通过上述全局翻译方案适配。

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