More explanation on how scope/alias should be used

[mackelito]

Is there an existing issue for this?

• I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Transloco, Scoped Libs

Is this a regression?

Yes

Current behavior

I'm using nx and standalone feature libraries and It feels like scope is not really used..

    provideTranslocoScope({
      scope: 'admin-feature',
	  alias: 'admin',
      loader,
    }),
  ],

{
"admin-feature": 
	{
		"titel": "A title"
	}
}

in the component template I have to use
{{ t('admin-feature.title') }}

Expected behavior

I was expecting that when using alias I could do {{ t('admin.title') }}
and that it would pick the string from admin-feature.title

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

could not create one using CodeSandBox or Stackblitz

Transloco Config

No response

Please provide the environment you discovered this bug in

Transloco: 4.3.0
Angular: 15.2.0
Node: 20.6
Package Manager: NPM
OS: MacOS

Browser

No response

Additional context

No response

I would like to make a pull request for this bug

No

[shaharkazaz]

There are a lot of examples (playground code, playground demo, codesnadbox, scope configuration). So maybe I don't get your question or you didn't review/understand the documentation.

If you have reviewed all the related material but still have a question, please provide a reproduction link.

[mackelito]

Perhaps some background is needed here :)
Now I know we do not use transloco in the traditional way but never the less it suites our needs :)

We have a Nx workspace and our apps are basically just some routes, app.component, imports and providers (standalone applications)
Then we rely on standalone feature libraries rest of the way :)

In our standalone features we use the inline loader to load the translations.
translations: libs/feature-a/lib/i18n/
component: libs/feature-a/lib/componentA/

const loader = ['en', 'sv'].reduce((acc, lang: string) => {
  acc[lang] = () => import(`../i18n/${lang}.json`);
  return acc;
}, {} as Record<string, () => Promise<Translation>>);

  providers: [
    provideTranslocoScope({
      scope: 'featureA',
      loader,
    }),
  ],

This works fine as expected.

Now to the tricky part....

The apps then have a custom HttpLoader

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  private http = inject(HttpClient);
  private params = inject(ParametersService);

  getTranslation(lang: string) {
    const clientId = this.params.getClientId();
    const language = this.params.getLanguage() || lang;
    const apiUrl = `/client/${clientId}?language=${language}`;
    const result = this.http.get<Translation>(apiUrl);
    return result;
  }
}

this then returns all the keys that needs client specific translations.
This also works as expected.. now we want to use this in feature-a

My expectations was that if I have the scope of 'featureA', I could then set a alias to use only within the components of featureA
so if I have

    provideTranslocoScope({
      scope: 'featureA',
      alias: 'banana',
      loader,
    }),

I should be able to do the following in the template
t('banana.my_translation_key')

But I could not get that working... however, using the scope worked.
t('featureA.my_translation_key')

I'm fine with using the scope... but it would be cleaner if I did not need to use any prefix at all in the templates 😄
t('my_translation_key')

ok.. now this turned into a long comment.. hope I made some sense 😂

[SuneRadich]

@mackelito Do you perhaps have a shareable repo that showcase this setup? We are in the process of moving our existing nx monorepo to use Standalone components, and I could use some inspiration to how to get transloco loading working without the modules.

[mackelito]

Sorry but I'm not allowed to share any of my clients code :/
But it is rather detailed described here in this ticket so if you have any questions I'm happy help!

I might add that we do use it in a rather "unorthodox" way :D
We use it not only for translations but also to load translations based on a specific userId.. so based on userId in the url param you might get different wordings as well as different languages.