angular.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TRANSLOCO_SCOPE, TranslocoModule } from '@ngneat/transloco';

@NgModule({
  imports: [
    TranslocoModule,
  ],
  declarations: [],
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      useValue: {
        scope: 'scopeName',
        loader: scopeLoader((lang, root) => import(`./${root}/${lang}.json`)),
        isLoaded: false
      },
      multi: true
    }
  ]
})
export class AngularModule {}

angular.service.ts

import {
  translate,
  TRANSLOCO_SCOPE,
  TranslocoService
} from '@ngneat/transloco';

export class AngularService {

  isTranslationsLoaded = false;
  private translationSubscription: Subscription;


  constructor(
    private translateService: TranslocoService,
    @Inject(TRANSLOCO_SCOPE) private scope
  ) {
    if (this.scope.isLoaded) {
      this.isTranslationsLoaded = true;
      return;
    }

    this.translationSubscription = this.translateService.events$
      .pipe(
        filter(e => {
          const scopes = this.scope.map(i => i.scope);
          return (
            e.payload.scope === 'scopeName' &&
            e.type === 'translationLoadSuccess' &&
            scopes.includes(e.payload.scope)
          );
        })
      )
      .subscribe(() => {
        this.isTranslationsLoaded = true;
        this.scope.isLoaded = true;
      });
  }

}

scope-loader.ts

import { langs } from '../../../../../transloco.config';

export const scopeLoader = (importer, root = 'i18n') => {
  return langs.reduce((acc, lang) => {
    acc[lang] = () => importer(lang, root);
    return acc;
  }, {});
};

transloco.config.js

module.exports = {
  langs: ['en', 'pl'],
};