TranslateModule.forChild() ignored when using lazy loaded modules custom element Web Components

[bjornharvold]

Current behavior

I am using a custom web component based on Angular Elements. I have lazy loaded modules; each with their own i18n file. TranslateModule.forChild configuration in the lazy module is completely ignored. Instead the configuration from TranslateModule.forRoot is loaded a second time when calling this.translate.setDefaultLang('en') in the lazy module.

Expected behavior

Should work the same way ngx-translate documentation for i18n files per module is described.

How do you think that we should fix this?

Currently, the only way to make this work is to have each lazy module load the translation via forRoot and have no forRoot in AppModule.

Minimal reproduction of the problem with instructions

issue-ngx-loadable.zip

Environment

@angular-devkit/architect 0.13.9 @angular-devkit/build-angular 0.13.9 @angular-devkit/build-ng-packagr 0.13.9 @angular-devkit/build-optimizer 0.13.9 @angular-devkit/build-webpack 0.13.9 @angular-devkit/core 7.3.9 @angular-devkit/schematics 7.3.9 @angular/cdk 7.3.7 @angular/cli 7.3.9 @angular/flex-layout 7.0.0-beta.24 @angular/material 7.3.7 @angular/pwa 0.13.9 @ngtools/json-schema 1.1.0 @ngtools/webpack 7.3.9 @schematics/angular 7.3.9 @schematics/update 0.13.9 ng-packagr 4.7.1 rxjs 6.5.2 typescript 3.2.4 webpack 4.29.0 @ngx-translate/core": "11.0.1", @ngx-translate/http-loader": "4.0.0",

For Tooling issues:

• Node version: 10.15.3
• Platform: Mac

[eulersson]

For lazy-loaded modules with different translation loaders (loading .json from different files) it seems to be either (in the case of the lazy-loaded):

• (LazyModule isolate: false, extend: true) React to parent module translation events automatically without having to connect anything, just as they say, but cannot load the lazy loaded specific files.
• (LazyModule isolate: true, extend: true) We have to propagate changes to parent's translation event changes to the lazy child ourselves, and we can have our specific translations working! But the parent's translation won't work.

It's like I can't blend the two.

I got pretty close though maybe you could have a look and play within StackBlitz: https://stackblitz.com/edit/translations-and-lazy-loading?file=README.md