8

is there any way to create an angular library with handling the translation inside the library with ngx-translate ? i've been trying a lot of methods for the last couple of days with no luck

7
  • Not sure what you’re asking Commented Aug 22, 2021 at 1:18
  • There's always a way, could you please provide more explanation for what you are looking to achieve? Commented Aug 22, 2021 at 1:59
  • yeah sure , well i've been working on creating an angular library but i need to provide some translations for it in arabic or english version so i need to install the translations inside the library but i cant get it done. Commented Aug 22, 2021 at 9:52
  • i think that the most libarys offer the oportunity of overwriting their textes. so you have to look for this ability in the libary Commented Aug 24, 2021 at 13:12
  • @DerHerrGammler all i need to achieve is to make my custom angular library have its own translations thats all Commented Aug 25, 2021 at 12:40

1 Answer 1

16

Depends how you intend your library to be used and what control you have over the host apps. Do you want to impose ngx-translate also on the host apps? Or you want your lib to be agnostic of how the i18n is handled?

Option 1) static translations in lib
You can simply hardcode the translation data into your library, e.g. via custom translation loader or directly setting the data via translate.setTranslation('lang', {data}).
Pros: easy, host app does not need to be aware of how your lib handles translations internally
Cons: all locale data is embedded in your lib and thus always loaded, host app has no way how to override them or add new locale.

Option 2) translations packaged in lib assets
You can distribute your translation files as assets together with your lib. Not sure if angular builder supports this already, in the past you'd need to first build the lib and then add the assets a la: "build-lib": "ng build portal-lib --prod && cp -R /src/assets/ dist/your-cool-lib/assets",.
Then you can instruct the host app, to add your lib assets to its assets array in angular.json. For example:

...
"assets": [
   "src/favicon.ico",
   "src/assets",
   {
     "glob": "**/*",
     "input": "node_modules/your-cool-lib/assets/",
     "output": "/your-cool-lib/assets/"
   }
],
...

Your lib could then still use ngx httpTranslationLoader and simply tell it where do you expect the translations to be found:

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './your-cool-lib/assets/i18n/', '.json');
}

If the host app would use ngx-translate itself, then you need can use ngx-translate-multi-http-loader and configure it for example:

export function createTranslateLoader(http: HttpClient) {
 return new MultiTranslateHttpLoader(http, [
    { prefix: './assets/i18n/', suffix: '.json' },//host app i18n assets
    { prefix: './your-cool-lib/assets/i18n/', suffix: '.json' }, //your lib assets
  ])
}

Pros: you only load resources for the actually used language, you can add and override i18n data, useful if you also control/influence the host apps, and your use ngx-translate everywhere.
Cons: more complicated setup, host must perform additional configuration to make this work, you must decide whether you want to isolate the translations of your module, whether you want to impose ngx-translate on host app as well

Option 3) let host pass the translations during module load
Other common approach is that you expose some custom API that can be used by the host app to push translations to the library at the module load/import time - e.g. service, custom injection token, forRoot(yourModuleConfig) method etc, which you then use in your library as a source of translation data(you can then use the data as custom translation loader(provide: TranslateLoader,... ) for ngx-translate, or you can ditch the ngx-translate in your lib altogether and use the translations your received from host. This is done by many component libs, e.g. check PrimeNG
Pros: i18n lib agnostic, easy to document and extend/override, you can remove ngx-translate as dependency of your lib
Cons: requires more effort on your side as lib provider, more complicated update process (e.g. when new version of your app defines some new i18n keys, the host would have to supply them as well when it updates)

Sign up to request clarification or add additional context in comments.

12 Comments

hello thanks a lot for this answer but am kinda still lost lemme tell you what i've done and tell me what to do cuz i've tried way too much methods and none of them really worked but the one that iam trying to achieve now is this one which is posted here festack.blogspot.com/2020/03/… can you check it out ? thanks
am getting this error in the console zone.js:2863 GET localhost:4200/assets/i18n/ar.json 404 (Not Found)
stackblitz.com/edit/angular-ivy-68oblg?file=README.md have a look on this stackblitz( you'll need to download it and build locally) Check the readme.md for info & instruction. In general, stackoverflow is a Q&A site, not a support forum so dont expect complete solutions for your task. For option 3 - it is always a completely custom implementation, not related to ngx-translate, just check any of the public libs that use it, such as PrimeNG I linked. If the answer helped address your question, please mark it as accepted. Good luck
If the library does not have an i18n file for a language required by the host app, you have basically 2 options: a)ask the library author to localize the lib to XYZ language or b) provide the i18n yourself(in the option 2 -httploader- you can simply add the ,,library translations" to you host app fr.json,en.json , or you can make new dedicated fr.json and put it to assets/my-lib/assets/..
thanks a lot for this comment i really appreciate your comments
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.