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);

[ali1996hass]

did anyone found a solution yet?
I tried all of the above

[Stusaw]

Have a look at this. https://www.youtube.com/watch?v=NJctHJzy5vo

[BrandoCaserotti]

@ocombe are you planning to fix this issue in the immediate future?

[petogriac]

works for me with @Juusmann solution , thanks!

[brianmriley]

@Juusmann's solution works for me as well. To be extremely specific and to add clarity to anyone still wondering how it all fits together, I have the following setup (using abbreviated module definitions):

AppModule

...
// AoT requires an exported function for factories.
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

...

imports: [
   ...
   // NOTE: Normally we'd stick TranslateModule in `CoreModule` but the ability to lazy load
   // module translations and extend the main one only works if you set it up in the root `AppModule`.
   // Use the TranslateModule's config param "isolate: false" to allow child, lazy loaded modules to 
   // extend the parent or root module's loaded translations.
   TranslateModule.forRoot({
        defaultLanguage: 'en',
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        },
        isolate: false
    }),
]

SharedModule

@NgModule({
    declarations: DECLARATIONS,
    imports: [
        ...MODULES,
        ...TranslateModule
    ],
    exports: [
        ...MODULES,
        ...TranslateModule
        ...DECLARATIONS,
    ]
})
export class SharedModule {
}

LazyLoadedModule

...
// AoT requires an exported function for factories.
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, './assets/i18n/'lazy-load, '.json');
}

...

imports: [
   ...
   // Use the TranslateModule's config param "extend: true" to extend the parent or root module's
   // loaded translations.
   TranslateModule.forChild({
        defaultLanguage: 'en',
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        },
        extend: true
    }),
]
export class LazyLoadedModule {
    constructor(protected translateService: TranslateService) {
        const currentLang = translateService.currentLang;
        translateService.currentLang = '';
        translateService.use(currentLang);
    }
}

Key Points

• Use the TranslateModule's method forRoot() with config param isolate: false in AppModule to allow child, lazy loaded modules to extend the parent or root module's loaded translations.
• Use the TranslateModule's method forChild() with config param extend: true in LazyLoadedModule to extend the parent or root module's loaded translations.
• DO NOT attempt to move the TranslateModule setup and configuration from AppModule to a CoreModule as it won't allow the root translations and only works when setup directly in AppModule.
• Force TranslateModule to load the LazyLoadedModule's child translations by setting the locale on the TranslateService in its constructor.

[Stusaw]

In addition to @brianmriley solution I also had to do the following in app.component.ts constructor before this would work. Only issue I can see is that it now loads all lazy feature modules .json files upfront and not when the lazy route is hit.

 // this language will be used as a fallback when a translation isn't found in the current language
     translate.setDefaultLang('en-GB');

// the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en-GB')

[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

[niroshank]

@docwhite did you solve it?
I also configured the translateService again to set the currentLang. But didn't work

[eulersson]

@docwhite did you solve it?
I also configured the translateService again to set the currentLang. But didn't work

My company needed something as soon as possible, so I sadly decided to go with another tool called transloco.

I'm a bit scared about ngx-translate getting a little bit left behind (by looking at the last release being like 1 year ago) yet being still a standard. I heard the main developer moved to another job working with the Angular team and this project has been a bit left to the community which doesn't know as much as the actual creator.

I'm happy to come back to it and keep cracking this issue with modular translations. We work with the monorepo workflow as Nx recommend and this is a must for me, and since I saw a Nx example with scopes in transloco I decided to give it a whirl.

You know you can't stay for too long trying to solve an issue when you work for a company :(

I left this example StackBlitz to see if someone can crack the problem and come up with a solution, I couldn't. I am subscribed to this issue so I would be very happy to see someone solve it and then I would get back to ngx-translate.