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