IT Blog - my diary of solving strange cases

Github markdown version - can be easier to read

Requirements: project with default @ngneat/transloco configuration

If you use @ngneat/transloco and were wondering how to lazy load multiple scopes inside module there is a solution for you.

So you have your project configured already with @ngneat/transloco and you want to simply load multiple translations lazy loaded in the scope of choosen module.

There are steps that you need to follow to make it work - let’s go.

1) Redefine default TransolocoLoader getTranslation function Transloco Loader

  getTranslation(langPath: string) {
    let [multiplePaths, activeLang] = langPath.split('/');
    let splittedMultiplePaths = multiplePaths.split(',');

    let obs: Observable<any>[] = [];
    splittedMultiplePaths.forEach((path) => {
      obs.push(
        this.http.get<Translation>(`/assets/i18n/${path}/${activeLang}.json`)
      );
    });

    return forkJoin([...obs]).pipe(
      map(([translation, vendor]) => {
        return { ...translation, ...vendor };
      })
    );
  }

2) Example of translation files - you need to wrap every file with unique module prefix (eg. “auth” like below)

{
  "auth": {
    "email": "Email",
  }
}

3) In module inside what you want to use your multiple translations define provider option with useValue containing array of translations that you want to load Module

providers: [{ provide: TRANSLOCO_SCOPE, useValue: ['core', 'auth'] }]

4) Finally - you can use your multiple translations inside html templates Template

Happy coding! 🚀