31

Angular's i18n is great, and tools like ng-packagr makes component library packaging extremely easy, but can they be combined?

What if i want to package and distribute a component library having translatable components? Is it possible? How do I package such a library? Will translation files be shipped together with the package, or should they be defined in the main app?

It'd be great if someone could point me at some doc. Thanks

leonixyz
  • 1,130
  • 15
  • 28

2 Answers2

8

When you generate a translation file for the main app with the CLI (with ng xi18n), elements with the attribute i18n in the library are imported in the translation file. You can then define the translations in the main app.

R3N0
  • 191
  • 2
  • 8
  • That is correct. But there is another way where you can define the translations in your component library, thats how some ng elements do, like ng bootstrap. It switch locale languages based on the server locale configuration. – Jonathan Ramos Jun 07 '18 at 14:53
  • How did you solve this warning "No name was provided for external module '@ngx-translate/i18n-polyfill' in output.globals – guessing 'i18nPolyfill'" ? I ahve tried to add it to paths but it won't work. If I add it to ng-package.json in umdModuleIds list then it will go away, but is this correct way to use it. Maybe this is new topic but I think you maybe have already solve it. – Janne Harju Feb 13 '19 at 06:55
  • 9
    But what if I want to distribute official translations of my library with it? How do I approach this? – waterplea Feb 20 '19 at 08:52
  • 1
    I have yet to start preparing my library for distribution, once I get to that stage I might come up with something. Will keep in mind posting here, although I'm not sure it would be any time soon :) – waterplea Mar 27 '19 at 11:44
  • Also interested in this. Haven't found anything about distributing translations with an Angular library. – dude Jun 05 '20 at 20:49
  • @waterplea did you find a way to do it? – Max Mar 11 '22 at 13:19
0

There are two ways of doing so - statically providing the assets and bundling on build time or configuring translation path on runtime.

  1. In order to statically include files on build time, you just use setTranslations in the code, as mentioned in https://github.com/ngx-translate/core docs. Then, you can just bundle your translations with the code.

  2. Better would be to let consumer know what to use. In order to properly be able to provide path to translation files (assuming standard structure, where every translation is residing in a separate file containing language in the name), you can do something as follows:

    interface TranslationsConfig {
  prefix: string;
  suffix: string;
}

export const TRANSLATIONS_CONFIG = new InjectionToken('TRANSLATIONS_CONFIG');

@NgModule({
  declarations: [],
  imports: [
    NgxTranslateModule,
  ],
  exports: [
    NgxTranslateModule,
  ]
})
export class TranslateModule {
  public static forRoot(config: TranslationsConfig): ModuleWithProviders {
    return {
      ngModule: TranslateModule,
      providers: [
        {
          provide: TRANSLATIONS_CONFIG,
          useValue: config
        },
        ...NgxTranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient, TRANSLATIONS_CONFIG]
        }
      }).providers
    ],
  };
}

    }

This code makes sure that when building library, AOT will be able to resolve types (hence InjectionToken etc.) and allows to create custom translations loader.

Now it's only up to you to implement loader factory or class that will use the config! This is mine (I'm using POs for my translations):

export function HttpLoaderFactory(http: HttpClient, config: TranslationsConfig) {
  return new TranslatePoHttpLoader(http, config.prefix, config.suffix);
}

Please do remember to export every class and function that you're using in the module as that's prerequisite for AOT (and libraries are built with AOT by default).

To use this whole solution, wherever you use your main library module or this translation module, you can just call TranslateModule.forRoot(/* Your config here */). If this is not the main module exported, more on using hierarchical modules with forRoot here:

How to use .forRoot() within feature modules hierarchy

SzybkiSasza
  • 1,591
  • 12
  • 27