Is there an existing issue for this?

• 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 🚀