Loading bundles for a module

You can load bundles for a module to support localization and internationalization.

Procedure

Set up the TranslateModule to use the MultiTranslateHttpLoader. The MultiTranslateHttpLoader uses HttpClient to load translations, so import the HttpClientModule before the TranslateModule.

The MultiTranslateHttpLoader takes a list of translation file configurations. Each configuration has the following two parameters:prefix: string = "./assets/store-frontend/i18n/<moduleName>"suffix: string = ".json"

Notes:

Ensure to create the folder <moduleName> under BUNDLE_EXTENSIONS_HOME.

It is recommended to create the configuration required for MultiTranslateHttpLoader in the following format. A similar approach has been followed in the application-provided feature modules as well.

// Array of configurations required for the module declared in a class and exported. 
                        export class UserBundlesModule {
  static bundles: Array<any> = [
    {
      prefix: './assets/store-frontend/i18n/user/‘,
      suffix: '.json'
    }
];
}

/* Configure the custom MultiTranslateHttpLoader as an exported function. 
If you are using any UI componets from SharedModule, you have to load the SharedModule bundles as well.
In this case, you need to import SharedBundlesModule from SharedModule 
and include them in your custom LoaderFactory function as shown in this code snippet. 
If you are not using any UI components of SharedModule, then you need not include
the SharedBundlesModule in the custom LoaderFactory. */

  export function UserBundlesModuleHttpLoaderFactory(http: HttpClient) 
{
  const bundles = [];
  Array.prototype.push.apply(bundles, UserBundlesModule.bundles);
  Array.prototype.push.apply(bundles, SharedBundlesModule.bundles);
  return new MultiTranslateHttpLoader(http, bundles);
}


//  Initialize TranslateModule to use the custom LoaderFactory define earlier.
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: UserBundlesModuleHttpLoaderFactory,
        deps: [HttpClient]
      }
 })


//  Initialize the TranslateService for your custom module.
export class UserModule {
  constructor(private translateService: TranslateService) {


    // Get language from appInfo or userInfo or resolvedLocale
    this.translateService.setDefaultLang(AppInfoService.getFallbackLanguage());
    this.translateService.use('en');

  }
}