Core: Lazy-loaded modules dont get their translations when "isolate" is false.

[thessoro]

Current behavior

• Alternate i18n files are not loaded when using lazy-loaded modules if "isolate" param is false. So the module can access the main file translations but not theirs.

• When "isolate" is true the file is correctly loaded but the module doesn't have access to previously loaded translations.

Expected behavior

Lazy loaded modules should be able to load their own translation files and at the same time being able to access previously loaded translation files as stated in the docs.

How do you think that we should fix this?

Minimal reproduction of the problem with instructions

For reproduction please follow the steps of the ngx-translate docs in a freshly angular created application with one or more lazy-loaded modules and one shared module exporting TranslateModule.

Environment

ngx-translate version: 12.1.2
Angular version: 9.1.0


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 10.15.2
- Platform:  Linux

Others:

[thessoro]

Found a workaround to this issue thanks to a @ye3i comment in a PR.
translateService.currentLang = '';
translateService.use ('en');

The trick seams that ngx-translate wont load anything if the language doesn't change one way or another. So when isolate is false the currentLang inherits from parent and if it is the same as the one in "use" it wont make the neccesary http request.

[phongca22]

app.module.ts

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/app/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [   
    HttpClientModule,
    TranslateModule.forRoot({
      loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient] }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app/en.json

{
   "action": "Create"
}

Lazy loaded

order.module.ts

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/order/', '.json');
}

@NgModule({
  declarations: [OrderComponent],
  imports: [  
    TranslateModule.forChild({
      loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient] },
      isolate: true
    })
  ]
})
export class OrderModule {}

order/en.json

{
   "title": "Order"
}

order.component.html

<div>{{'title' | translate}}</div>
<div>{{'action' | translate}}</div>

app.component.html

<div>{{'action' | translate}}</div>
<div>-----Order Component-----</div>
<app-order></app-order>

Result

Create
-----Order Component-----
Order
action

How to access "action" key in order component?

[GuillaumeSpera]

I've got the same issue here, even if I try every combinaison with extend boolean, it doesn't change anything.

RootModule : isolate: false
ChildModule (lazy loaded):
isolate :false => I access root translations but I don't have my child's translations
isolate: true => I access the child's translations but not the root ones

Is there anything I didn't understand ?
The documentation in README states

To make a child module extend translations from parent modules use extend: true. This will cause the service to also use translations from its parent module.

Does extend not combine with isolate ? Then, how do you limit propagation of child translations but profit from parent's ones ?

Thanks

[Totot0]

I have the same problem. Do you have a solution?

[GuillaumeSpera]

Nop, didn't get any movement here. Have no solution.

[Juusmann]

My workaround until this issue has been resolved is following:

1. Ensure configs isolate: false and extend: true are set in both root and child modules
2. Set current language in the root component (AppComponent or similar): this.translateService.use(lang);
3. In the lazy loaded module reset the current language to make sure the translations get retrieved:

    const currentLang = translateService.currentLang;
    translateService.currentLang = '';
    translateService.use(currentLang);