ngx-translate not showing any text in lazy-loaded module

Managed to solve the issue. In a quite unexpected way. First, as Taranjit Kang mentioned, I imported TranslateModule to the SharedModule with forChild({}) method passing in an empty object. And exported it.

Also, I created a constructor in SharedModule, injecting TranslateService and initialising it with all the appropriate stuff.

SharedModule:

@NgModule({
    imports: [TranslateModule.forChild({})],
  exports: [TranslateModule]
})
export class SharedModule {
    constructor(private translate: TranslateService) {
        translate.addLangs(['en', 'ru']);
        translate.setDefaultLang('en');
        translate.use('en');
    }
}

SharedModule is then imported to all the lazy-loaded modules.

Also, as before, I imported TranslateModule with forRoot(TRANSLATE_CONFIG) method into AppModule.

TranslateModule.forRoot(TRANSLATE_MODULE_CONFIG)

Hope this will help.


When importing into components that are not the root component, I used the following:

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

I had to set 'isolate: false' in order for it to work, took me a couple of days, very frustrating