How to map the translation files reference to any one module and use them in any other lazy module without being downloaded multiple times

[peddikishore]

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

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. And when I do not reference them in my client module then the language references are not coming.

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 HTML is 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 they 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 we use in multiple modules?

[denniske]

I'm sorry, I cannot help you with this as I have never used multiple modules with multiple translations files.