core: Lazy loaded module specific JSON translation file not loading

I’m submitting a

[x] feature request => load child module specific translation JSON file

Current behavior In my lazy loaded child module account.module.ts I’m importing TranslateModule with forChild()

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    FormsModule,
    AccountRoutingModule,
    TranslateModule.forChild({
      loader: { provide: TranslateLoader, useClass: AccountTranslationLoader, deps: [Http] },
    })
  ],
})
export class AccountModule { }

I have custom translate loader AccountTranslationLoader written as

export class AccountTranslationLoader implements TranslateLoader {

    constructor(private http: Http) {}

    getTranslation(lang: string): Observable<any> {
        return this.http.get(`./assets/i18n/account/${lang}.json`)
    }
}

Currently the expected json file request is never made and translation in child module views not working.

Expected/desired behavior It is expected to load the child module json translation file and append it to the previously loaded translation file loaded from AppModule using TranslateModule.forRoot()

Please tell us about your environment:

ngx-translate version: ^7.0.0
Angular version: ^4.1.3

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 14
Comments: 17 (2 by maintainers)

Most upvoted comments

The GET request is never made because there are no subscribers on the Observable for fetching the child JSON. I assume translate.use() is used in the root to set language, which auto-subscribes and completes for root only Source: translate.use. It does not automatically fetch the JSON for the child.

Make a test by subscribing to onLangChange() manually in the child module and change the language in code. It should fetch the JSON.

matkarlg on Jul 24, 2017

@panagulis72 it does not work for me actually even in a child module which is lazy loaded it does not work and never loads language.

ratidzidziguri on Jul 12, 2018

I made it work will help from matkarlg. Just add the translate.use in the lazy loaded module’s constructor. BUT I rolled it back. Because I could see some problems with sharing translations between the modules. With the isolated;false. the lazy loaded module will get the ‘top’ translation. So far so good. But how will it work the other way around. If a module has not yet been loaded (lazy), will it’s translations be loaded? Probably not. So some of the translation will need to stay in the ‘top’ files. Because they are so general. And they might be needed in achors/menus that navigates to the lazy loaded module. So if you have a module called ex. Fruits, You would end up with a part of the translations in the top translation file and a part of it in the FruitsModule json file. ex en.json and fruits-en.json. I prefer to have all the ‘fruits’ translation in one place. So I keep all translations i one big file until a better approach comes my way

Jensiator on Aug 24, 2017

Hi all, I have the same issue:

I have three different modules:

app.module module1.module module2.module

and they are nested that way.

in app.module I have implemented module1 and in module1 I have implemented module2.

That was really crazy, despite configuring module2, it takes the configurations of module1.

Any idea on that?

MiguelCh24 on Feb 25, 2021

I wrote a article about how to have 1 json file per lazy loaded module without having to write a new Custom Loader etc… it’s quiet simple, only the documentation is not clear in fact: https://medium.com/@TuiZ/how-to-split-your-i18n-file-per-lazy-loaded-module-with-ngx-translate-3caef57a738f

Tuizi on Sep 23, 2017