Angular 在应用之前初始化 Transloco

Question

在 Angular 项目中，我们使用 Transloco 进行翻译。在我的打字稿中，我尝试像这样使用 transloco 服务：

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

我知道我有责任确保翻译文件在调用时已成功加载，因此我尝试了使用 APP_INITIALIZER 的推荐方法。但是它仍然会抛出错误“缺少翻译”。

知道为什么吗？也许配置错误？这是我的 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 {}

Answer 1

根据https://jsverse.github.io/transloco/docs/recipes/prefetch

也许只是一个

return firstValueFrom(transloco.load('en));

而不是

Promise.resolve()

这对我有用：

const DEFAULT_LANGAGE = 'fr';
export function preloadTranslation(transloco: TranslocoService) {
  return function () {
    transloco.setActiveLang(DEFAULT_LANGAGE);
    return firstValueFrom(transloco.load(DEFAULT_LANGAGE));
  };
}

@NgModule({
  exports: [TranslocoModule],
  providers: [
    provideTransloco({
      config: {
        availableLangs: ['fr', 'en'],
        defaultLang: DEFAULT_LANGAGE,
        prodMode: environment.production,
      },
      loader: TranslocoHttpLoader,
    }),
    {
      provide: APP_INITIALIZER,
      multi: true,
      deps: [TranslocoService],
      useFactory: preloadTranslation,
    },
  ],
})
export class TranslocoRootModule {}

Answer 2

根据您所附的代码，该错误可能是由于缺少 transloco 配置引起的。

由于您没有提及您使用的 Angular 版本，因此我为您提供了适用于我的 Angular 14 项目的配置示例代码。

import { APP_INITIALIZER, NgModule } from '@angular/core';
import {
  Translation,
  TRANSLOCO_CONFIG,
  TRANSLOCO_LOADER,
  translocoConfig,
  TranslocoModule,
  TranslocoService,
} from '@ngneat/transloco';
import { Observable } from 'rxjs';
import { TranslocoHttpLoader } from './transloco-http-loader';

@NgModule({
  exports: [TranslocoModule],
  providers: [
    {
      // Provide the default Transloco configuration
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: [
          {
            id: 'en-US',
            label: 'English-US',
          },
          {
            id: 'zh-TW',
            label: '繁體中文（臺灣）',
          },
        ],
        defaultLang: 'zh-TW',
        fallbackLang: 'zh-TW',
        reRenderOnLangChange: true,
        prodMode: true,
      }),
    },

    {
      // Provide the default Transloco loader
      provide: TRANSLOCO_LOADER,
      useClass: TranslocoHttpLoader,
    },

    {
      // Preload the default language before the app starts
      // to prevent empty/jumping content
      provide: APP_INITIALIZER,
      deps: [TranslocoService],
      useFactory:
        (translocoService: TranslocoService) =>
        (): Observable<Translation> =>  {
          const defaultLang = translocoService.getDefaultLang();
          translocoService.setActiveLang(defaultLang);
          return translocoService.load(defaultLang);
        },
      multi: true,
    },
  ],
})
export class TranslocoRootModule {}