Feature(scope): Dynamically load and apply translations in app.routes

[mackelito]

Is there an existing issue for this?

• I have searched the existing issues

Which Transloco package(s) will this feature affect?

Transloco, Scoped Libs, Don't know / other

Is your feature request related to a problem? Please describe

We have a nx workspace and each feature library has translation files.. but I need to be able to override some of the features translations based on app.

Describe the solution you'd like

In the app routes I would like to use a custom loader that fetches the translations from a api and applies them when the feature is loaded.

Perhaps something like this...

export const loader = () => {
  const translations = inject(TranslocoService).getTranslation();
  return translations;
};

  {
    path: 'admin',
    canActivate: [redirectGuard],
    loadChildren: () => import('@myOrg/admin').then((m) => m.adminRoutes),
    providers: [
      provideTranslocoScope({
        scope: 'admin',
        loader: loader,
      }),
    ],
  },

but no matter how I try I end up with this:
Type '() => InlineLoader' is not assignable to type 'InlineLoader'. Index signature for type 'string' is missing in type '() => InlineLoader'.

Describe alternatives you've considered

ngx-translate, angular native i18n

Additional context

No response

I would like to make a pull request for this feature

Yes 🚀

[Iamthereality]

@mackelito you may have missed a part of the type of your loader function. The inline loader's type is actually an alias for another type, HashMap<() => Promise<Translation>>. Your error is telling you that the index part of the Hash<T> type is missing, so your loader function should return either HashMap<() => Promise<Translation>> or its alias, InlineLoader.