@ngx-translate with lazy-loaded module in Angular 5

Question

I'm using @ngx-translate for language handling in an Angular 5 app I'm creating. The app has two feature modules, one lazy loaded and one eager loaded.

The problem is that the translate pipe works fine in the eager-loaded module but not the lazy-loaded one. How can I fix that?

You can check these thread, might be helpful https://stackoverflow.com/a/68456163/11727315 — Viplav Soni, Jul 20 '21 at 13:59
You can refer these answer I added the code for lazy loaded module https://stackoverflow.com/a/68456163/11727315 — Viplav Soni, Jul 20 '21 at 14:12

score 12 · Answer 1 · answered May 18 '18 at 09:23

12

In my lazyload modules i had to add this to imports:

TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })

also in lazyloaded component i did something like that:

import {TranslateService} from '@ngx-translate/core';

in constructor:

private translate: TranslateService

and finally onInit:

this.translate.use(language);

And it is working just fine.

answered May 18 '18 at 09:23

DanielWaw

669
7
22

1

this should be the correct answer...because in this case we'll be using forChild method used only for lazy loading modules with ngx-translate and as appear in the docs. In my case i was missing the injection part in the component, and that is not described in the docs. – Takatalvi Nov 28 '18 at 18:43
@Takatalvi What do you mean with injection part? – Chris Mar 14 '19 at 21:36
i can't remember clearly right now but reading the code i think the injection part was use the setDefaultLang with the language used in the main module, in my case was stored in localstorage, and then use it in the component of that module. IE: this.translate.setDefaultLang(lang); this.translate.use(lang); – Takatalvi Mar 21 '19 at 12:53
this load first time only, if you changed the lang through ui component, will not working – Muhammed Moussa May 16 '19 at 11:44
this.translate.onLangChange.subscribe((event: LangChangeEvent) => { }); will solve it ;) – DanielWaw May 20 '19 at 06:57
2

@DanielWaw This was a complete life saver! I've been stuck on trying to make this work for a whole day. This works like a charm! Definitely the fix I've been looking for. – Niveditha Karmegam Aug 02 '19 at 12:53
@DanielWaw: sir its working perfectly but suppose i have 50+ component so each and every component we have to add this.translate.use(language) this line.? – Kapil Soni Nov 29 '19 at 11:23
@Kapilsoni well this is just for lazy loaded modules, You create a modules for each so one more line of code shouldnt be a problem. I dont know if there is any other solution for this. Thats what i use personally. – DanielWaw Dec 02 '19 at 08:43

score 10 · Accepted Answer · answered Feb 27 '18 at 17:45

10

I've also been struggling with the same problem and have yet to find a feasible answer.

The kind folks at Angular are working on i18n, but this may take more time.

While not ideal, you might want to check out the following article:

“How to split your i18n file per lazy loaded module with ngx-translate?” @frogeret https://medium.com/@TuiZ/how-to-split-your-i18n-file-per-lazy-loaded-module-with-ngx-translate-3caef57a738f

answered Feb 27 '18 at 17:45

Kiffin

1,048
1
15
21

I am able to run the app in dev mode i.e. when I run the app as `ng serve` but, I'm unable to build the app in prod mode i.e. `ng build --prod`. Any suggestion? – Sandeep Kumar Jan 03 '19 at 07:04

score 0 · Answer 3 · answered May 28 '18 at 11:52

0

You can check the ngstack/translate library that works for Angular and Ionic apps. Also provides support for lazy loading, page title translations, custom pipes and many other great features.

answered May 28 '18 at 11:52

Denys Vuika

621
1
12
10

@ngx-translate with lazy-loaded module in Angular 5

3 Answers3