Custom component's dynamic translation loading

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

What is the motivation / use case for changing the behavior?

Current lazy loading behavior supports only application-related translations that are placed at one global folder. Even this case requires additional time to maintain component’s translation files that are separated with component’s folder.

i18n/
  en.json
  es.json
  todos/
    en.json
    es.json
src/
  some/
    module/
      component/
        todos/
          images/
          todos.ts
          todos.html
          todos.scss

Also there is no way to seamlessly provide lazy loaded shared lib components translations. Our case is a monorepo with a lot of libs that are used in different applications (at the same repository).

It would be cool to have an ability to provide custom dynamic imports for TRANSLOCO_SCOPE, like this

todos/
  images/
  translation/
    en.json
    es.json
  todos.ts
  todos.html
  todos.scss

export function en() { return import('./translation/en.json'); }
export function es() { return import('./translation/es.json'); }

@Component({
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      useFactory: () => ({
        scope: 'todos',
        translations: { en, es }
      }),
    },
  ]
})
export class ToDosComponent {}

Currently we found one way to achieve this with some hacks, but it works only at a module level and requires more code

Stackblitz https://stackblitz.com/github/artaommahe/transloco-dynamic-translations/tree/module Repo https://github.com/artaommahe/transloco-dynamic-translations/tree/module

There are an eagerly loaded component, dynamically loaded via routing and a component from lib. All have dyncamically loading translations that are placed next to the components files. E.x.

• lib component
• his translations loading
• translations registering at the lib module

And the translations loading code on lang changes https://github.com/artaommahe/transloco-dynamic-translations/blob/module/libs/translate/src/module.ts#L18

updated solution below: https://github.com/ngneat/transloco/issues/121#issuecomment-540535199

[shaharkazaz]

Inline loaders are now avialable in v2.2.0.

We also released a schematics command to build a unified translation file from all the sub-translation files. Currently, it supports JSON format, but other formats support is in progress. 🙂

[NachoVazquez]

Amazing!! I’ll test it tonight.