在NX工作区多Angular应用间共享ngx-translate翻译文件方案咨询

步骤1：创建NX共享库存放通用翻译 #

先通过NX命令生成专门的共享库，用来托管所有应用共用的翻译文件：

nx generate @nrwl/angular:library shared-translations --style=scss --skip-tests

在库的src/assets目录下新建i18n文件夹，把通用的en.json和de.json移进去。

步骤2：配置库的资源导出 #

修改项目根目录的angular.json，找到shared-translations库的architect.build.options.assets配置，添加翻译文件的资源映射，确保构建时能将通用翻译文件打包到dist目录：

"assets": [
  "libs/shared-translations/src/assets",
  {"input": "libs/shared-translations/src/assets/i18n", "output": "./assets/i18n"}
]

步骤3：封装自定义翻译加载器（核心） #

在共享库中创建自定义的TranslateLoader，实现同时加载通用翻译和应用自有翻译的逻辑，让应用翻译可以覆盖通用翻译的重复键：

// libs/shared-translations/src/lib/shared-translate.loader.ts
import { TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';

export class SharedTranslateLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    private appI18nPath: string // 由应用传入自有翻译的路径
  ) {}

  getTranslation(lang: string): Observable<any> {
    // 加载通用翻译
    const sharedTrans$ = this.http.get(`/assets/i18n/${lang}.json`);
    // 加载应用自有翻译
    const appTrans$ = this.http.get(`${this.appI18nPath}/${lang}.json`);

    // 合并两个翻译对象，应用翻译优先级更高
    return forkJoin([sharedTrans$, appTrans$]).pipe(
      map(([shared, app]) => ({ ...shared, ...app }))
    );
  }
}

步骤4：封装共享翻译模块 #

把ngx-translate的配置封装成共享模块，让每个应用可以快速导入，同时支持传入自有翻译的路径：

// libs/shared-translations/src/lib/shared-translations.module.ts
import { NgModule, InjectionToken } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClientModule } from '@angular/common/http';
import { SharedTranslateLoader } from './shared-translate.loader';

// 定义注入令牌，用来接收应用传入的自有翻译路径
export const APP_I18N_PATH = new InjectionToken<string>('APP_I18N_PATH');

export function createTranslateLoader(
  http: HttpClient,
  appI18nPath: string
) {
  return new SharedTranslateLoader(http, appI18nPath);
}

@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient, APP_I18N_PATH]
      }
    })
  ],
  exports: [TranslateModule]
})
export class SharedTranslationsModule {
  static forRoot(appI18nPath: string) {
    return {
      ngModule: SharedTranslationsModule,
      providers: [
        { provide: APP_I18N_PATH, useValue: appI18nPath }
      ]
    };
  }
}

步骤5：应用侧的配置调整 #

1. 清理每个应用的翻译文件：删除src/assets/i18n下的通用内容，只保留应用特有的翻译，比如en.json里只放该应用独有的键值对。
2. 在应用的AppModule中导入共享模块，传入自有翻译的路径：

// apps/your-app/src/app/app.module.ts
import { SharedTranslationsModule } from '@your-workspace/shared-translations';

@NgModule({
  imports: [
    // 其他模块...
    SharedTranslationsModule.forRoot('./assets/i18n')
  ]
})
export class AppModule {}

3. 确保应用的angular.json中assets配置包含自有翻译的目录，默认情况下src/assets已经被包含，一般不需要额外修改。

步骤6：验证与维护 #

启动任意应用测试多语言切换，确认通用翻译和应用自有翻译都能正常加载，遇到重复键时应用的翻译会覆盖通用翻译。后续更新通用翻译时，只需要修改共享库中的en.json和de.json，所有应用在构建或更新依赖后就能同步最新内容。

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