Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

183
Views
Packaging an Angular library with i18n support

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

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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.

over 4 years ago · Santiago Trujillo Report

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

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!