jsverse/transloco

Bug(transloco): cant provide DefaultHandler

pascal-kania opened this issue · 4 comments

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?

Yes

Current behavior

if i want to initialize transloco via a useFactory method in angular 16 then i can't set a provider via provideTranslocoMissingHandler(DefaultHandler) because it is not exported via the index.ts

for example:

providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useFactory: (environment: Environment) =>
        translocoConfig({
          availableLangs: availableLanguages,
          defaultLang: DEFAULT_LANGUAGE,
          prodMode: environment.production,
          fallbackLang: DEFAULT_LANGUAGE,
          missingHandler: {
            useFallbackTranslation: true
          },
          reRenderOnLangChange: true
        }),
      deps: [ENVIRONMENT]
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
    provideTranslocoTranspiler(DefaultTranspiler),
    provideTranslocoMissingHandler(DefaultHandler) <--- i cant use the DefaultHandler here

i got the following error message:

transloco.module.ts:5:0-81 - Error: Module not found: Error: Package path ./lib/transloco-missing-handler is not exported from package ... @ngneat\transloco (see exports field in @ngneat\transloco\package.json)

Expected behavior

it should be possible to use the DefaultHandler with provideTranslocoMissingHandler(DefaultHandler)

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/s/ngneat-transloco-forked-gjdn5d?file=/src/app/app.config.ts

Transloco Config

-

Please provide the environment you discovered this bug in

Transloco: 5.0.7
Angular: 16.1.9
Node: v18.12.0
Package Manager: npm(8.19.2)
OS: Windows 10

Browser

Chrome

Additional context

I would like to make a pull request for this bug

No

i also cant use the DefaultInterceptor

i found a way for using the default providers over

provideTransloco({
      config: undefined as any, <-- but this is also not a clean approach.
      loader: TranslocoHttpLoader
    }),

@pascal-kania The DefaultMissingHandler is like the name states is the default handler provided by Transloco, you get it OOTB, the same goes for the DefaultInterceptor 🙂
You should you the provideTransloco function.
Here is the relevant snippet from transloco.providers.ts file:

export function provideTransloco(options: TranslocoOptions) {
  const providers: EnvironmentProviders[] = [
    provideTranslocoTranspiler(DefaultTranspiler),
    provideTranslocoMissingHandler(DefaultHandler),
    provideTranslocoInterceptor(DefaultInterceptor),
    provideTranslocoFallbackStrategy(DefaultFallbackStrategy),
  ];

  if (options.config) {
    providers.push(provideTranslocoConfig(options.config));
  }

  if (options.loader) {
    providers.push(provideTranslocoLoader(options.loader));
  }

  return providers;
}

If I'm missing something please feel free to further explain and share more information as to what you are trying to do.

We are facing the same issue in our project, where we have provided TRANSLOCO_CONFIG by using useFactory. The reason is, that we rely on another injected service (UserPreferenceService) to provide us the default language by looking it up in the local storage.

{
  provide: TRANSLOCO_CONFIG,
  deps: [UserPreferenceService],
  useFactory: (userPreferenceService: UserPreferenceService) => {
    return translocoConfig({
      availableLangs: config.languages,
      defaultLang: userPreferenceService.getPreferredLanguage(
        config.languages,
        config.defaultLanguage
      ),
      prodMode: config.prodMode,
    });
  },
},

So we cannot use provideTransloco, as UserPreferenceService needs to be injected before. Maybe this is not something which can be solved in transloco @shaharkazaz ?

The alternative that I see currently is to replace the UserPreferenceService with a plain helper method, which does not need DI, like:

provideTransloco({
  config: {
      availableLangs: config.languages,
      defaultLang: getPreferredLanguage(config.languages, config.defaultLanguage),
      prodMode: config.prodMode,
    },
  loader: TranslocoHttpLoader
})

These default handlers are now exposed in v7.3.0