ngx-translate How to map the translation files reference to any one module and use them in any other lazy module without downloading multiple times

Viewed 1209

My Angular application has multiple modules and each module has its own language files and there are some common components as well used across the application which are loaded in the app.module.ts file. below is the code

I'm using ngx-translate(core & http) with ngx-translate/multi-http-loader.

App.module.ts

export function createTranslateLoader(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: './assets/i18n/app/', suffix: '.json' },
    { prefix: './assets/i18n/common/', suffix: '.json' },
    { prefix: './assets/i18n/common-components/', suffix: '.json' },
    { prefix: './assets/i18n/common-dialogs/', suffix: '.json' },
    { prefix: './assets/i18n/shared/', suffix: '.json' },
    { prefix: './assets/i18n/report-management/common/', suffix: '.json' }
  ]);
}

in importing

TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      },
      isolate: true
    }),

Likewise, I created a similar setup in other modules separately by using TranslateModule.forChild now in my other module components when I trying to use the reference of my common/shared components translations they are not coming. And when I declared in other modules like below they are been downloaded multiple times.

export function createTranslateLoader(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    {prefix: './assets/i18n/client-management/', suffix: '.json'},
    {prefix: './assets/i18n/common-components/', suffix: '.json'},
    {prefix: './assets/i18n/shared/', suffix: '.json'},
    { prefix: './assets/i18n/common-dialogs/', suffix: '.json' }
  ]);
}

in importing

TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      },
      isolate: true
    }),

Now my problem is, those common translations are already declared in app.module and when referenced in other modules are not being called and when I declare them again in this lazy module they are being loaded multiple times one instance from app.module and another from the lazy module. Which should not as they were already called via app.module why are not coming in my lazy-loaded modules.

Can anybody suggest how to stop multiple downloads of those common files multiple times and once declared can be used in multiple multiple modules?

0 Answers
Related