Angular NgxTranslate缺失翻译处理场景下如何让翻译管道等待JSON文件加载完成

ngx-translate默认采用异步方式加载翻译文件，翻译文件加载完成前，页面渲染触发translate pipe时，会直接判定对应翻译键不存在，触发缺失翻译处理器，导致静态翻译还没加载就先走了外部API查询逻辑。

方案1：使用APP_INITIALIZER在应用启动前预加载翻译（最优雅） #

Angular提供的APP_INITIALIZER令牌可以让你在应用根模块初始化完成前执行预加载逻辑，等翻译文件全部加载完成后再启动应用，从根源上避免翻译未就绪就触发pipe的问题。
代码示例：

import { APP_INITIALIZER } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { firstValueFrom } from 'rxjs';

// 初始化翻译的工厂函数
export function preloadTranslationsFactory(translate: TranslateService) {
  return async () => {
    const defaultLang = 'fr';
    translate.setDefaultLang(defaultLang);
    // 等待翻译文件加载完成
    await firstValueFrom(translate.use(defaultLang));
    return;
  };
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      defaultLanguage: 'fr',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      missingTranslationHandler: {
        provide: MissingTranslationHandler,
        useClass: MyMissingTranslationHandler
      }
    }),
    ...
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: preloadTranslationsFactory,
      deps: [TranslateService],
      multi: true
    }
  ]
})
export class AppModule {}

该方案无侵入性，不需要修改现有业务代码和翻译逻辑，应用启动后所有静态翻译都已就绪，不会触发不必要的外部API调用。

方案2：不阻塞启动场景下优化缺失翻译处理器 #

如果你的应用允许启动时先显示临时内容，不想阻塞首屏启动，可以在缺失翻译处理器里加加载状态判断，翻译未加载完成时不调用外部API，等加载完成后pipe会自动重新执行翻译逻辑：

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

export class MyMissingTranslationHandler implements MissingTranslationHandler {
  constructor(public injector: Injector) {}

  handle(params: MissingTranslationHandlerParams): string {
    const translateService = this.injector.get(TranslateService);
    // 判断当前语言的翻译是否正在加载中
    if (translateService.isLoading) {
      // 加载中先返回key或自定义占位符，等加载完成后pipe会自动重新翻译
      return params.key;
    }
    const result = ApiCallToFindTheKey(params.key)
    return result ? result : params.key;
  }
}

TranslateService内置的isLoading属性会自动标记当前是否有翻译请求在处理，加载完成后ngx-translate会自动触发所有翻译pipe重新计算，此时如果静态翻译存在就会直接返回，不会走到调用外部API的逻辑。

方案3：路由级预加载 #

如果是多语言切换场景下的加载问题，可以在路由守卫里预加载对应语言的翻译，切换路由前等待翻译加载完成再进入页面，也能避免页面渲染时翻译未就绪的问题。

内容的提问来源于stack exchange，提问作者César Castro Aroche