@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?

Answer 1

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.

Answer 2

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