typescript - Angular เริ่มต้น 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 {}

คำตอบ #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 {}