Transloco初始化合并本地与服务端翻译文件的问题及优化方案

我需要一种可靠的方式，在应用初始化阶段从服务器预取翻译文件，并与本地翻译文件进行合并。官方文档指出可通过APP_INITIALIZER提供者设置翻译语言，但该方式仅适用于静态JSON资源文件（如src/assets/i18n/en.json），无法直接结合从服务器获取的JSON翻译文件使用。

尝试的实现代码 #

app.module.ts 配置 #

// app.module.ts 
...
    {
      provide: APP_INITIALIZER,
      multi: true,
      useFactory: preloadServer,
      deps: [TranslocoService, HttpClient]
    }
...

预加载函数 #

export function preloadUser(transloco: TranslocoService, _httpClient: HttpClient) {
  return () => {
    combineLatest([
      _httpClient.get(`http://my.server.com/en.json`), // 获取服务器端翻译文件
      transloco.selectTranslation('en') // 获取本地静态翻译文件
    ]).pipe(
      take(1),
      map(([server, client]) => (
        Object.assign(client, server) // 合并两个对象
      )),
      tap(merged => transloco.setTranslation(merged, 'en')) // 用合并后的对象更新'en'语言的翻译
    ).toPromise();
  }
}

问题现象 #

上述方案存在随机生效的问题：重新加载应用10次，有一半概率显示服务端翻译内容，另一半概率显示本地翻译内容。

更新
在@naren-murali的解答后，我重写了初始化函数，利用Transloco提供的翻译合并选项，以下是更新后的实现：

export function preloadTranslation(transloco: TranslocoService, httpClient: HttpClient) {
  return () => {
    return concat(
      transloco.selectTranslation('en'), // 先获取本地翻译文件
      httpClient.get(`http://my.server.com/en.json`) // 再获取服务器端翻译文件
    ).pipe(
      // 利用Transloco API的{ merge: true }选项，将服务器端翻译键合并到本地对象中
      tap(serverTranslation => transloco.setTranslation(serverTranslation, 'en', { merge: true }))
    ).toPromise();
  }
}

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