✨View on StackBlitz

Dependencies

Installation

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

Usage

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{ModuleTranslateLoader,IModuleTranslationOptions}from'@larscom/ngx-translate-module-loader'import{AppComponent}from'./app'exportfunctionmoduleHttpLoaderFactory(http:HttpClient){constbaseTranslateUrl='./assets/i18n'constoptions:IModuleTranslationOptions={modules:[// final url: ./assets/i18n/en.json{ baseTranslateUrl},// final url: ./assets/i18n/feature1/en.json{ baseTranslateUrl,moduleName:'feature1'},// final url: ./assets/i18n/feature2/en.json{ baseTranslateUrl,moduleName:'feature2'}]}returnnewModuleTranslateLoader(http,options)}@NgModule({imports:[BrowserModule,HttpClientModule,TranslateModule.forRoot({loader:{provide:TranslateLoader,useFactory:moduleHttpLoaderFactory,deps:[HttpClient]}})],bootstrap:[AppComponent]})exportclassAppModule{constructor(readonlytranslate:TranslateService){translate.setDefaultLang('en')}}

Namespacing

exportfunctionmoduleHttpLoaderFactory(http:HttpClient){constbaseTranslateUrl='./assets/i18n'constoptions:IModuleTranslationOptions={modules:[// no moduleName/namespace{ baseTranslateUrl},// namespace: FEATURE1{ baseTranslateUrl,moduleName:'feature1'},// namespace: FEATURE2{ baseTranslateUrl,moduleName:'feature2'}]}returnnewModuleTranslateLoader(http,options)}

{"KEY":"VALUE"}

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

Configuration

interfaceIModuleTranslationOptions{/**   * The translation module configurations   */modules:IModuleTranslation[]/**   * By default, each module gets its own namespace so it doesn't conflict with other modules   */disableNamespace?:boolean/**   * By default, namespaces are uppercase   */lowercaseNamespace?:boolean/**   * By default, it'll perform a deepmerge when merging translation files   */deepMerge?:boolean/**   * Set a version to prevent the browser from caching the translation files.   * Each translation will get a query parameter with the version number   *@example 'en.json?v=123'   */version?:string|number/**   * Function that gets executed if an error occurred while retrieving a translation file   *@param error the error that occurred   *@param path the path to the location file   */translateError?:(error:any,path:string)=>void/**   * Custom translate merge function after retrieving all translation files   *@param translations the resolved translation files   */translateMerger?:(translations:Translation[])=>Translation/**   * Provide custom headers at 'root' level, which means this headers gets added to every request   * unless you specify headers at 'module' level.   *@see modules   */headers?:HttpHeaders}

interfaceIModuleTranslation{/**   * The module name   *   * For example: shared   *@description omit moduleName 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/**   * By default, it uses the moduleName as namespace   *@see moduleName   *   * Use this property if you want to override the default namespace   */namespace?:string/**   * Custom translation map function after retrieving a translation file   *@param translation the resolved translation file   */translateMap?:(translation:Translation)=>Translation/**   * Custom path template for fetching translations   *@example   * '{baseTranslateUrl}/{moduleName}/{language}'   * or   *@example   * '{baseTranslateUrl}/{language}'   *   * It depends whether you have a moduleName defined   *@see moduleName   */pathTemplate?:string/**   * Provide custom headers at 'module' level. These headers only apply to this module.   */headers?:HttpHeaders}

Custom templates for fetching translations

constoptions:IModuleTranslationOptions={modules:[// resolves to: ./assets/my-path/en.json{ baseTranslateUrl,pathTemplate:'{baseTranslateUrl}/my-path/{language}'},// resolves to: ./assets/my-path/en/feature1.json{ baseTranslateUrl,moduleName:'feature1',pathTemplate:'{baseTranslateUrl}/my-path/{language}/{moduleName}'},// resolves to: ./assets/my-path/en/feature2.json{ baseTranslateUrl,moduleName:'feature2',pathTemplate:'{baseTranslateUrl}/my-path/{language}/{moduleName}'}]}

Custom headers

constoptions:IModuleTranslationOptions={// global headers, applied to every request, unless you specify headers at 'module' levelheaders:newHttpHeaders().set('Header-Name','Header value')modules:[{ baseTranslateUrl},// headers only applied to this module{ baseTranslateUrl,moduleName:'feature1',headers:newHttpHeaders().set('Header-Name','Header value')},{ baseTranslateUrl,moduleName:'feature2'}]};