Angular: How to package translation (ngx-translate) with custom library

Hello dear developers, Today in this post I am going to address most important topic about translation service i.e ngx-traslate. Most of the time you have used ngx-translate service in your Angular app to show localization language. If your app is small then it's pretty simple to implement ngx-translate service by following available ngx-translate documentation.

But in some cases if you are working on large scale app consisting lot of modules and it is using lazy loading module routing strategy then obviously using the translation service which has single en.json (or other) file for the whole app is not a idle way to do it. Because you app is depend on lazy loading module strategy.

So you should have to split this en.json file at module level instead. What do I mean by 'at module level' here is that every module has it's own en.json file which will keep the translations for that particular module only.

Let's see the solution

If you follow the ngx-translate documentation carefully you will see how easy it is to implement the solution.

Key points to know

Since everything is well described in the ngx-translate documentation so I wouldn't be going to explain again instead I would like to highlight key points while you implement the solution.

When you would use the TranslateHttpLoader to load translations from "/assets/i18n/[lang].json" ([lang] is the lang that you're using, for english it could be en). You are app.module will look like below:

In above code the forRoot static method is a convention that provides and configures services at the same time. Make sure you only call this method in the root module of your application, most of the time called AppModule

You can also isolate the service by using isolate: true. In which case the service is a completely isolated instance (for translations, current lang, events, ...).

So in one of the lazy loaded module of your app you must consume TranslateHttpLoader like below:

The last thing to remember that in assets folder of your app should have lazy-loaded folder which contains localization language file in this case en.json like below:

assets > i18n > lazy-loaded > en.json

Once you have completed the above implementation you will notice that now you lazy-loaded module is loading it's own language file.

Now let's see how we can package ngx-translate in the library package. In certain scenario you want to use your module as external library and for that reason you have to publish your module as library package and you have to package translation file within library.

We couldn't implement above solution simply because first in ngx-translate plug-in it always depend on assets folder at the root of your app for source en.json file even though you keep it in your library assets folder. Second, Angular cli doesn't include the assets on build so you have to add them manually or with gulp to the dist folder before making the package.

So to address this issue I looked upon web to find some nice solution and then I came accross to this stackoverflow post which looks very straight to me and I decide to let's try it out.

How to use ngx-translate with library

First, let's convert .json files to .ts files returning as json object like below (in this example en.json only):

Second create local translateService which adds the translations on top of the existing one's (those added by the json files of the main application). See below:

If you have noticed above local translate service which has init(lang: string) method and you pass any of the langauge as parameter then it initialize one or all languages by calling translateService.setTranslation() method.

And in the last step you can use this local translation service in your component to over rule the previous translation like below:

Now your localization file will be placed under your library package assets folder like below:

lib > assets > i18n > lazy-loaded > en.ts

After implementing translation service locally I am able to see it worked as expected and it can package and ship with library.

If you have liked this post please let me know your opinion by commenting below. Thanks and stay tuned until next post.