Transloco Issue

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { Injector, NgModule, NgZone } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedLocalizationModule } from '../shared/localization';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    SharedLocalizationModule.forRoot(environment.production),
  ],
  providers: [],
  declarations: [AppComponent, EmptyComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

my-feature.module.ts

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule, Injector } from '@angular/core';
import { MyLocalizationModule } from '../localization';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    MyLocalizationModule,
  ],
  declarations: [
    MyComponent,
  ],
  providers: [],
  exports: [],
})
export class MyFeatureeModule {}

my-localization.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
import { TranslocoLocaleModule } from '@ngneat/transloco-locale';
import { SomeService } from '../services/some.service';
import { myScope } from './my-scope';

@NgModule({
  imports: [CommonModule, TranslocoModule, TranslocoLocaleModule],
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      deps: [SomeService],
      useFactory: myScope
    }
  ],
  exports: [TranslocoModule, TranslocoLocaleModule]
})
export class MyLocalizationModule {}

my-scope.ts

import { SomeService } from '../services/some.service';
import { of } from 'rxjs';

export const getTranslations = (someService: SomeService, lang:" string) => () => {
  if (lang === 'en-us') {
    const i18n = someService.getEnglish(); //returns synchronous object
    const translations = {
      ...i18n.obj1,
      ...i18n.obj2
    };
    return of(translations).toPromise();
  }

  if (lang === 'es-us') {
    const i18n = someService.getSpanish(); //returns synchronous object
    const translations = {
      ...i18n.obj1,
      ...i18n.obj2
    };
    return of(translations).toPromise();
  }
};

export const scopeLoader = (someService: SomeService, loader = getTranslations) => {
  return {
    'en-us': loader(someService, 'en-us'),
    'es-us': loader(someService, 'es-us')
  };
};

export const myScope = (someService: SomeService) => ({
  scope: 'myScope',
  loader: scopeLoader(someService)
});

shared-localization.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { TRANSLOCO_CONFIG, TranslocoConfig, TranslocoModule } from '@ngneat/transloco';
import { TranslocoLocaleModule } from '@ngneat/transloco-locale';

@NgModule({
  imports: [TranslocoModule, TranslocoLocaleModule.init()]
})
export class SharedLocalizationModule {
  static forRoot(prodMode = false): ModuleWithProviders<SharedLocalizationModule> {
    return {
      ngModule: SharedLocalizationModule,
      providers: [
        {
          provide: TRANSLOCO_CONFIG,
          useValue: {
            availableLangs: ['en-us', 'es-us', 'fr-ca', 'en-ca'],
            defaultLang: 'en-us',
            fallbackLang: 'en-us',
            prodMode
          } as TranslocoConfig
        }
      ]
    };
  }
}