ngneat/transloco/lobby

Hello. I'm trying to follow the example here https://ngneat.github.io/transloco/docs/inline-loaders but I'm lacking clarity. I have the following JSON:

{
  "generalSettings": {
    "title": "General Settings",
    "header": "Edit the configuration for your store.",
    "clientInformation": {
      "sectionLbl": "Client Information"
    }
  }
}

In my features module, I have:

imports: [
  ...
  TranslocoModule
],
declarations: [
  ...all components
],
providers: [
  {
    provide: TRANSLOCO_SCOPE,
    useValue: {
      scope: 'shopSettings',
      loader,
    },
  },
],

The template works well. I have the following:

<div *transloco="let t; read: 'shopSettings.generalSettings'">
  <h2>{{ t('title') }}</h2>
  {{ t('header') }}
</div>

However, in the component file, I can't seem to load the translation. Each of the following queries logs error:

constructor(
  private translocoService: TranslocoService,
) {}

ngOnInit() {
  let result = this.translocoService.translateObject('shopSettings.generalSettings.clientInformation');
  result = this.translocoService.translateObject('generalSettings.clientInformation');
  result = this.translocoService.translateObject('clientInformation');
}

// outputs:
// Missing translation for 'shopSettings.generalSettings.clientInformation'
// Missing translation for 'generalSettings.clientInformation'
// Missing translation for 'clientInformation'

What am I missing? Thanks!