Transloco: Support for i18n files per library containing re-usable components

[bjornharvold]

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:

We have a lot of re-usable components living in our Angular libraries. When we import them into a new project, we always have to copy the i18n resource bundles from another project into the new SPA so the components display the translated text.

Is there a way to leave i18n resource bundles in the library and import per-library resource bundles one time when importing the library into a new SPA instead of copying and pasting this localized text every time?

Thank you,
Bjorn

[shaharkazaz]

@itayod is working on a solution to this problem.

[itayod]

@bjornharvold correct, I will keep you update with the details

[Ketec]

I just came here to ask about a very similar problem.

We have a modular project - custom components, services etc have theirs on semver library.
Naturally, those require translations.

So I thought about providing the service in a "core" library other parts will use (in forRoot()) and service to toggle languages.

But can't have separate translation files in each lib/core - but libs naturally don't have/include assets - and even if they do the main app would need to copy them from the node_modules and try to merge them together.

Not sure how to deal with this issue.

[itayod]

@Ketec the tool that I have been working on could solve your problem.
basically it will be a script that you could simply run with webpack / gulp / node that will copy the translation files into your main app, so it will be used by Transloco as a scope.

It should be ready in the next few days :)

[Dorrro]

@itayod any updates regarding this tool?

[itayod]

@Dorrro The tool is ready, I am working on clear overall documentation regarding this issue. Once it will be ready we will merge the code :)

[Ketec]

@Dorrro Does it handle scopes too? or expects i18n/en.json only?

Merging everything into a single file without scopes means you always load strings for lazy loaded parts as well - and in a larger app that can become a quite large download.

[montella1507]

@Dorrro The tool is ready, I am working on clear overall documentation regarding this issue. Once it will be ready we will merge the code :)

i think there may be better solution:

https://github.com/ngneat/transloco/issues/172#issuecomment-558318120

(use multiple providers for same key and use composition in "singleton service")

[NetanelBasal]

https://netbasal.gitbook.io/transloco/tools/scoped-library-extractor

[bjornharvold]

Hi @NetanelBasal . I have a question on this. I looked through the docs. I have a monorepo with multiple SPAs and I am not sure what my transloco.config.js should look like. I want to copy those library translation packs that are needed for each SPA and not sure how to do that with rootTranslationsPath.

module.exports = {
  rootTranslationsPath: 'src/assets/i18n',
  scopedLibs: [
    './projects/engine-lib/', 'engine-lib'
  ]
};