@larscom/ngx-translate-module-loader

@larscom/ngx-translate-module-loader

A loader for @ngx-translate/core that loads multiple translations using http. Each translation file has it's own namespace so the key/value pairs do not conflict with each other. If desired, this can be disabled.

Dependencies

@larscom/ngx-translate-module-loader depends on @ngx-translate/core and Angular.

Installation

npm i --save @larscom/ngx-translate-module-loader

Usage

1. create an exported HttpLoaderFactory function

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import {
  FileType,
  ModuleTranslateLoader,
  IModuleTranslationOptions
} from '@larscom/ngx-translate-module-loader';
import { AppComponent } from './app';

export function HttpLoaderFactory(http: HttpClient) {
  const options: IModuleTranslationOptions = {
    modules: [
      {
        // final url: ./assets/i18n/en.json
        moduleName: null,
        baseTranslateUrl: './assets/i18n',
        fileType: FileType.JSON
      },
      {
        // final url: ./assets/i18n/feature1/en.json
        moduleName: 'feature1',
        baseTranslateUrl: './assets/i18n',
        fileType: FileType.JSON
      },
      {
        // final url: ./assets/i18n/feature2/en.json
        moduleName: 'feature2',
        baseTranslateUrl: './assets/i18n',
        fileType: FileType.JSON
      }
    ]
  };
  return new ModuleTranslateLoader(http, options);
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Namespacing

By default, each translation file gets it's own namespace based on the moduleName, what does it mean?

For example with these options:

const options: IModuleTranslationOptions = {
  modules: [
    {
      // final url: ./assets/i18n/en.json
      moduleName: null,
      baseTranslateUrl: './assets/i18n',
      fileType: FileType.JSON
    },
    {
      // final url: ./assets/i18n/feature1/en.json
      moduleName: 'feature1',
      baseTranslateUrl: './assets/i18n',
      fileType: FileType.JSON
    },
    {
      // final url: ./assets/i18n/feature2/en.json
      moduleName: 'feature2',
      baseTranslateUrl: './assets/i18n',
      fileType: FileType.JSON
    }
  ]
};

Lets say each module in the above example resolves to the following translation:

{
  "KEY: "VALUE"
}

The final result would then be:

{
   "KEY: "VALUE",
   "FEATURE1" : {
     "KEY: "VALUE"
   },
    "FEATURE2" : {
     "KEY: "VALUE"
   }
}

If you don't need upper case keys, set nameSpaceUppercase to false in the options because it's upper case by default.

Configuration

export interface IModuleTranslationOptions {
  /**
   * The translation module configurations
   */
  modules: IModuleTranslation[];
  /**
   * Each module gets its own namespace so it doesn't conflict with other modules
   * @default enableNamespacing true
   */
  enableNamespacing?: boolean;
  /**
   * Create namespaces in Uppercase if namespacing is enabled
   * @default nameSpaceUppercase true
   */
  nameSpaceUppercase?: boolean;
  /**
   * Perform a deepmerge when merging translation files
   * @default deepMerge true
   */
  deepMerge?: boolean;
  /**
   * Function that gets executed if an http error occurred
   * @param error the error that occurred
   */
  translateError?: (error: any) => void;
}

export interface IModuleTranslation {
  /**
   * The module name
   *
   * For example: shared
   * @description set moduleName explicitly to null if you have a translate file at baseTranslateUrl level
   * @see baseTranslateUrl
   */
  moduleName: string;
  /**
   * The base translate URL
   *
   * For example: ./assets/i18n
   * @description the final url will then be: ./assets/i18n/shared if the moduleName is shared
   * @see moduleName
   */
  baseTranslateUrl: string;
  /**
   * The file type of the translation file (JSON only currently)
   */
  fileType: FileType;
}