TranslateObjectLoader

Simple loader for ngx-translate that uses an object library.

Why?

This loader is useful if you have multiple sub-modules in your Angular application which each have their own translation definitions and you want to have them all managed separately.

• Supported versions
  • Angular
  • ngx-translate
• Installation
• Usage

Supported versions

Angular

Angular	Supported
< 6.0.0	not tested
>= 6.0.0 <= 10.0.0	yes (2.x.x)
11.x.x	yes (3.x.x)
12.x.x	yes (4.x.x)
13.x.x	yes (5.x.x)

ngx-translate

ngx-translate	Supported
< 10.0.0	not tested
>= 10.0.0 <= 13.0.0	yes (>= 2.x.x)
14.x.x	yes (5.x.x)

Installation

npm install --save translate-object-loader

Usage

You can also check out the demo project if you just want to see the code.

Follow the instructions at @ngx-translate/core on how to install ngx-translate itself.

Then simply import the loader and provide it to the TranslateModule.

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateObjectLoader } from 'translate-object-loader';

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot({
            loader:
              provide: TranslateLoader,
              useClass: TranslateObjectLoader,
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Now, adding your translation definition is pretty simple. The only thing to keep in mind is that the top level objects of your definition should always be a language code because we select the language based on that.

Also, the last definition you import will always overwrite any keys that might already be defined in previous definitions.

// app.module.ts

import { Library } from 'translate-object-loader';
import { firstModuleTranslations } from 'first-module';
import { secondModuleTranslations } from 'second-module';

// Import each separately
Library.add(firstModuleTranslations);
Library.add(secondModuleTranslations);

// Or import multiple at the same time
Library.add(firstModuleTranslations, secondModuleTranslations);

// first-module.ts

import { TranslationDefinition } from 'translate-object-loader';

export const firstModuleTranslations: TranslationDefinition = {
  de: {
    key1: 'Schlüssel1',
  },
  en: {
    key1: 'Key1',
  },
};

// second-module.ts

import { TranslationDefinition } from 'translate-object-loader';

export const secondModuleTranslations: TranslationDefinition = {
  de: {
    key2: 'Schlüssel2',
  },
  en: {
    key1: 'Overwriting',
    key2: 'Key2',
  },
};