Angular initialize Transloco before application

Question

In a Angular project we are using Transloco for translations. Inside my typescript i am trying to use the transloco service like so:

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

I am aware that I am responsible for ensuring that the translation files have been successfully loaded by the time it's called so i tried the recommended approach of using APP_INITIALIZER. However it still throws the error " Missing translation for".

Any idea as to why? Perhaps a misconfig? This is my 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

According to https://jsverse.github.io/transloco/docs/recipes/prefetch

perhaps just a

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

instead of Promise.resolve()

This works on my side :

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 {}