Custom Angular library with ngx-translate

Question

I've created my own private angular library with multiple components to make my life easier. I made this library by following this tutorial. Everything worked out great I even added it to another project to test it out.

Now comes the part where I have to support multiple languages because I live in Belgium 😋. I've used the ngx-translate package in the past without any problem so i thought this would be easy.

I added an assets/i18n folder with the translation json's in my project.

I've found out that 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. After doing that I noticed that the labels were not being translated unless I included the translation to the json files of the Main application.

Each component in my library has its own module so I thought I just needed to add the translation module in those modules. So I did the following.

This made things even worse, not only were the labels still not being translated, my main applications didn't even use its own translations. The main application didn't have a problem with its translations before those changes in the library modules...

So yeah you guessed it, I am stuck... I can't seem to find the right solution.

Answer 1

Because I was getting nowhere I tried out another approach as described in this post. So I converted my json files to ts files returning a json object. I then created my own translateService which adds the translations on top of the existing one's (those added by the json files of the main application) as described in the post.

This worked but overruled the previous translations or even loaded too late. This resulted in the application just showing the translationkeys instead of the translation. So instead of initializing the translations like in the post, I used a subscribe to wait on the main translations first.

//Library
import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { en } from "../localization/en";
import { nl } from "../localization/nl";

@Injectable()
export class TranslateUiService {
    private availableLanguages = { en, nl };

    constructor(private translateService: TranslateService) {
    }

    public init(language: string = null): any {
        if (language) {
            //initialize one specific language
            this.translateService.setTranslation(language, this.availableLanguages[language], true);
        } else {
            //initialize all
            Object.keys(this.availableLanguages).forEach((language) => {
                this.translateService.setTranslation(language, this.availableLanguages[language], true);
            });
        }
    }
}

//App
constructor(private translateUiService: TranslateUiService, private translateService: TranslateService) {
        this.translateService.setDefaultLang('en');
        this.translateService.use('en').subscribe(() => {
            this.translateUiService.init('en');
        });
    }