Bug(transloco): Cannot easily access all TRANSLOCO_SCOPE (multi:true) providers with translateSignal API

[maleetz]

Is there an existing issue for this?

• [x] I have searched the existing issues

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

Transloco

Is this a regression?

No

Current behavior

Using an app.config.ts with multiple TRANSLOCO_SCOPE providers with inline loaders I am able to select translations from either scope using the pipe or directive but only have access to the first scope with the translateSignal API. I am assuming this is because of the code here which only uses the first scope passed to TranslocoService.selectTranslate:

https://github.com/jsverse/transloco/blob/master/libs/transloco/src/lib/transloco.service.ts#L337 lang = Array.isArray(lang) ? lang[0] : lang;

Demo component:

@Component({
  selector: 'app-root',
  imports: [TranslocoDirective, TranslocoPipe],
  template: `
    <ul *transloco="let t">
      <li>t("a.title"): {{ t('a.title') }}</li>
      <li>t("b.title"): {{ t('b.title') }}</li>
      <li>"a.title" | transloco: {{ 'a.title' | transloco }}</li>
      <li>"b.title" | transloco: {{ 'b.title' | transloco }}</li>
      <li>translateSignal('a.title'): {{ aTitle() }}</li>
      <li>translateSignal('b.title'): {{ bTitle() }}</li>
      <li>translateSignal('title'): {{ title() }}</li>
    </ul>
  `,
})
export class AppComponent {
  public aTitle = translateSignal('a.title');
  public bTitle = translateSignal('b.title');
  public title = translateSignal('title');
}

Output:

• t("a.title"): A Title
• t("b.title"): B Title
• "a.title" | transloco: A Title
• "b.title" | transloco: B Title
• translateSignal('a.title'): a.a.title
• translateSignal('b.title'): a.b.title
• translateSignal('title'): A Title

Expected behavior

I would expect the signal API to work the same way as the directive or pipe since they all have automatic access to the DI system and know what the current scopes are provided to the component.

I want translateSignal('a.title'); to show "A Title" and translateSignal('b.title'); to show "B Title" in the UI.

I do realize that I can workaround the situation with code like the below, but I end up having to either import a definition of the inline loader or duplicate it.

public explicitBTitle = translateSignal('title', undefined, {
    scope: 'b',
    loader: {
      en_us: () => firstValueFrom(this.http.get<Translation>(`/i18n/b.json`)),
    },
  });

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

https://codesandbox.io/p/devbox/89hkyg

Transloco Config

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    provideTransloco({
      config: translocoConfig({
        availableLangs: ['en_us', 'en_ca', 'fr_ca', 'es_us'],
        fallbackLang: 'en_us',
        defaultLang: 'en_us',
        prodMode: true,
        reRenderOnLangChange: true,
        missingHandler: {
          allowEmpty: true,
        },
      }),
    }),
    {
      provide: TRANSLOCO_SCOPE,
      multi: true,
      useFactory: () => {
        const http = inject(HttpClient);

        return {
          scope: 'a',
          loader: {
            en_us: () => firstValueFrom(http.get<Translation>(`/i18n/a.json`)),
          },
        };
      },
    },
    {
      provide: TRANSLOCO_SCOPE,
      multi: true,
      useFactory: () => {
        const http = inject(HttpClient);

        return {
          scope: 'b',
          loader: {
            en_us: () => firstValueFrom(http.get<Translation>(`/i18n/b.json`)),
          },
        };
      },
    },
  ],
};

Please provide the environment you discovered this bug in

Transloco: 8.0.2
Angular: 19.2.15
Node: v20.18.3
Package Manager: v10.8.2
OS: 15.6.1 (24G90)

Browser

Chrome: Version 140.0.7339.208 (Official Build) (arm64)

Additional context

No response

I would like to make a pull request for this bug

Yes 🚀

[shaharkazaz]

@maleetz Sounds legit, I'd love a PR for it 🙌

[OkeOyibo]

Bump

[maleetz]

Now that https://github.com/jsverse/transloco/pull/868 has been merged I can open a PR as a starting point. I think an open question I have is whether signals should default to autoPrefixKeys: false or if it should respect the global configuration. @shaharkazaz any thoughts on that question?