Angular中用APP_INITIALIZER预加载Transloco仍报翻译缺失错误求助

我们在Angular项目中使用Transloco实现国际化翻译功能，在TypeScript代码中通过以下方式调用Transloco服务：

this.translocoService.translate('foo.bar')

明明采用了官方推荐的APP_INITIALIZER方案来确保翻译文件加载完成，却仍抛出“Missing translation for”错误。是否存在配置问题？以下是我的transloco-root.module.ts代码：

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string) {
    return this.http.get<Translation>(`assets/i18n/${lang}.json`)
  }
}

function preloadLang(transloco: TranslocoService) {
  return function () {
    transloco.setActiveLang('en')
    return Promise.resolve()
  }
}

@NgModule({
  exports: [TranslocoModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      useFactory: preloadLang,
      deps: [TranslocoService],
    },
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ['en', 'nl'],
        defaultLang: 'en',
        prodMode: !isDevMode(),
      }),
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
  ],
})
export class TranslocoRootModule {}

问题原因 #

你的preloadLang工厂函数仅设置了激活语言，但没有等待翻译文件加载完成。直接返回Promise.resolve()会让APP_INITIALIZER跳过等待逻辑，导致组件初始化时翻译资源还未加载完毕，从而触发“Missing translation for”错误。

修复方案 #

修改preloadLang函数，调用transloco.load()方法并返回其Promise，确保APP_INITIALIZER等待翻译文件加载完成后再完成初始化：

function preloadLang(transloco: TranslocoService) {
  return function () {
    const targetLang = 'en';
    transloco.setActiveLang(targetLang);
    // 等待指定语言的翻译文件加载完成
    return transloco.load(targetLang);
  }
}

额外建议 #

1. 若默认语言已配置为en，可省略手动调用setActiveLang，但仍需调用load()预加载翻译文件
2. 检查assets/i18n/en.json文件是否存在，且包含foo.bar对应的翻译键值对
3. 若在组件中调用翻译，可改用transloco.selectTranslate('foo.bar')（Observable形式），该方法会自动订阅翻译加载完成后的结果，避免同步调用的时机问题

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