Can Angular library use independent language files than main app?

[rbirkgit]

I have tried for two days now getting my angular library project to load independent language files than from the main app. I tried every combination I can think of, but the language files gets overridden or not used.

If I only do enable localization in the app or the library it works fine, but as soon as my app includes the library it stops working. It seems they always share the same translation service, which may be the root cause.

My main app includes the library in its app.module. Then it uses this to load the resource files:

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useClass: TranslateUniversalLoader
  }
})

],

I do the same in the library (but use for Child() there). But if the main app provides a custom loader, the librarie's custom loader is not being called!! It is however if the main app does not provide one. I tried adding "isolate: false" to no avail.

So , has anyone gotten an angular library to load its own resources independent of the main app's resources?

[rbirkgit]

I guess there is no way to have my module in my library using a different instance so I tried doing this instead in the lib module:

for (let lang of Object.keys(TRANSLATIONS)) {
  this.translateService.setTranslation(lang, TRANSLATIONS[lang], true);
}

But that doesn't work either as then the loader is not called in the main app.

The only thing that seems to work is to do the above on both main app and lib module. Then the language files get merged and it works and you have to hope you library doesn't use the same IDs as the main app.

How are you supposed to develop a library that supports localization? It cannot require all apps that uses it to have to initiate ngx translate with the merge property and not use a loader and not use the same language IDs etc. This seems silly?

[ease]

Have you tried:

1. Write your translations in .ts files

export const localeEs = {
    "test-label": "Translating test label",
    "test-label-2": "Translating test label 2"
}

2. Make it available through by putting it in public_api.ts export * from './path-where-exported-in-index-file/index';

3. Import your library locales (They should be exported as JS objects - see 1):

import { localeEn } from 'demo-library';
import { localeEs } from 'demo-library';

4. Go to you app.component.ts and put the following:

    // Your app's locales
    translate.setTranslation('en', engLocale);
    translate.setTranslation('es', esLocale);

    // Library locales
    translate.setTranslation('en', localeEn, true);
    translate.setTranslation('es', localeEs, true);

Parameter 'true' stands for shouldMerge - https://github.com/ngx-translate/core#methods

If this doesn't work, please provide more info (code, etc...)

[rbirkgit]

I ended up doing a variation of that where the library has to merge its language resources into the main app's ones. I wish the library could have used its own instance of the translation service. Seems cleaner that way and no risk for using the same IDs etc.

[ullalaaron]

@rbirkgit could you share how you got your setup working? I am trying to achieve the same thing but keep getting Circular Dependency errors