Angular项目中如何让Transloco读取多份翻译文件？

核心思路是复用壳模块的Transloco实例，将微前端的翻译文件合并到该实例的语言包中，而非让微前端单独维护独立实例。以下是具体实现步骤：

1. 微前端侧调整翻译服务 #

在微前端中创建一个翻译服务，负责加载自身的翻译文件并合并到壳模块的Transloco实例中，同时监听语言切换事件保持同步：

@Injectable({ providedIn: 'root' })
export class MicrofrontTranslationService {
  constructor(
    private translocoLoader: TranslocoLoader,
    private translocoService: TranslocoService
  ) {
    // 监听壳模块的语言切换，自动加载对应语言的翻译
    this.translocoService.langChanges$
      .pipe(switchMap(lang => this.loadAndMergeTranslations(lang)))
      .subscribe();
  }

  async loadAndMergeTranslations(lang: string) {
    // 加载微前端自身的翻译文件
    const microfrontTranslations = await this.translocoLoader.load(lang);
    // 将翻译合并到当前Transloco实例（壳模块的实例）
    this.translocoService.mergeLang(lang, microfrontTranslations);
  }
}

同时确保微前端的Transloco配置为非根模式，避免重复创建全局实例，比如在微前端的Feature模块中使用provideTransloco而非provideTranslocoRoot：

@NgModule({
  imports: [
    TranslocoModule,
    // 其他模块
  ],
  providers: [
    provideTransloco({
      loader: TranslocoHttpLoader,
      // 微前端的基础配置，确保不覆盖壳模块的全局设置
    }),
    MicrofrontTranslationService
  ]
})
export class MicrofrontFeatureModule {}

2. 壳模块侧触发微前端翻译注册 #

当通过模块联邦加载微前端后，获取微前端的翻译服务实例，触发初始翻译加载：

async loadMicrofrontModule() {
  // 加载微前端模块
  const microfrontModule = await loadRemoteModule({
    type: 'module',
    remoteEntry: 'http://localhost:3000/remoteEntry.js',
    exposedModule: './FeatureModule'
  });

  // 获取微前端的翻译服务并触发初始加载
  const microTransService = inject(MicrofrontTranslationService);
  const currentLang = inject(TranslocoService).getActiveLang();
  await microTransService.loadAndMergeTranslations(currentLang);
}

关键注意事项 #

• 确保壳模块和微前端使用相同版本的Transloco，避免因版本差异导致实例冲突。
• 微前端不要初始化独立的Transloco根实例，必须复用壳模块提供的全局TranslocoService。
• 如果微前端有自定义的翻译命名空间，可在合并时通过命名空间区分，避免键名冲突。

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