Localize angular library with ngx-translate

Question

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

There's always a way, could you please provide more explanation for what you are looking to achieve? — Mohamed.Karkotly
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. — Un1xCr3w
i think that the most libarys offer the oportunity of overwriting their textes. so you have to look for this ability in the libary — DerHerrGammler
@DerHerrGammler all i need to achieve is to make my custom angular library have its own translations thats all — Un1xCr3w

yntelectual yntelectual · Accepted Answer · 2021-08-29T17:16:09

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)

Localize angular library with ngx-translate

1 Answers