使用ngx-translate实现Angular库内部本地化的方案咨询

以下为可复现的落地配置流程：

前置依赖安装 #

在库项目和后续接入的宿主项目中均安装对应版本依赖，注意匹配当前使用的Angular大版本：

• npm install @ngx-translate/core @ngx-translate/http-loader

库内翻译模块封装 #

在库的src/lib下新建i18n目录存放翻译相关配置，核心模块代码如下：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// 自定义加载器：加载库自身独立的翻译文件，和宿主项目隔离
export function LibraryTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/[替换为你的库名]/', '.json');
}

@NgModule({
  imports: [
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: LibraryTranslateLoader,
        deps: [HttpClient]
      },
      isolate: true // 核心配置：创建库独立的翻译实例，不会和宿主的ngx-translate配置冲突
    })
  ],
  exports: [TranslateModule]
})
export class YourLibTranslateModule {
  static forRoot(): ModuleWithProviders<YourLibTranslateModule> {
    return {
      ngModule: YourLibTranslateModule,
      providers: [TranslateService]
    };
  }
}

在库的src/assets/i18n/[你的库名]/目录下存放翻译文件，例如zh-CN.json、en-US.json示例：

{
  "lib.component.title": "库内组件标题",
  "lib.button.confirm": "确认"
}

最后修改库的ng-package.json配置，将翻译文件打包入库产物：

{
  "assets": [
    "./src/assets/**/*"
  ]
}

库内组件使用翻译 #

直接在组件内注入独立的TranslateService即可，和普通Angular项目使用方式一致：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'lib-your-component',
  template: `<h1>{{ 'lib.component.title' | translate }}</h1>`
})
export class YourLibComponent {
  constructor(private translate: TranslateService) {
    // 初始化默认语言，也可以暴露方法供宿主调用同步语言
    this.translate.setDefaultLang('zh-CN');
  }

  // 暴露给宿主的语言切换方法
  public switchLang(lang: string) {
    this.translate.use(lang);
  }
}

宿主项目接入配置 #

宿主项目安装库之后，仅需要做路径映射配置即可：

1. 修改angular.json，将库的翻译文件拷贝到宿主运行时的assets目录：

{
  "projects": {
    "你的宿主项目名": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/assets",
              {
                "glob": "**/*.json",
                "input": "node_modules/[你的库名]/assets/i18n",
                "output": "/assets/i18n/[你的库名]/"
              }
            ]
          }
        }
      }
    }
  }
}

2. 在宿主的AppModule中导入库的翻译模块：

import { YourLibTranslateModule } from '[你的库名]';

@NgModule({
  imports: [
    // 宿主其他模块
    YourLibTranslateModule.forRoot()
  ]
})
export class AppModule { }

常见问题排查 #

• 翻译显示为key而非对应文本：检查angular.json的assets拷贝路径和库内TranslateLoader配置的路径是否完全匹配
• 和宿主项目ngx-translate配置冲突：确认库的TranslateModule配置中isolate: true参数已添加
• 打包后翻译不生效：确认库的ng-package.json中assets配置已包含翻译文件目录

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