ngx-translate not showing any text in lazy-loaded

Question

We are using Angular 6 in our application. We recently started to prepare our app fro lazy-loading. Application has multiple lazy-loaded routes. We want to use a single language file for all routes (don't need to separate it into chunks. But load all translations on bootstrap).

First thing I tried was just to import and configure ngx-translate in AppModule (forRoot) and nowhere else. For that purpose I created a configuration file for TranslateModule with the following code:

import {
    MissingTranslationHandler, MissingTranslationHandlerParams, TranslateLoader,
    TranslateModuleConfig
} from '@ngx-translate/core';
import {HttpClient} from '@angular/common/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export class MyMissingTranslationHandler implements MissingTranslationHandler {
    handle(params: MissingTranslationHandlerParams): string {
        return '';
    }
}

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '/l10n/', '.json');
}

export const TRANSLATE_MODULE_CONFIG: TranslateModuleConfig = {
    loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
    },
    missingTranslationHandler: {provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler},
};

This worked only for eagerly-loaded routes. For lazy-loaded all text was just empty.

Then I tried to use forChild() method in the lazy-loaded module with the same configuration of TranslateModule (as it's written here - ngx-translate). Same result. I also tried to simply import TranslateModule into lazy-loaded module without providing it with any configuration..

Neither of the ways worked. All text fields in the lazy-loaded routes are empty.

Has anyone had any similar issues? I was searching the web but couldn't find any specific solution. How can I properly apply translations from the same file to lazy-loaded modules?

Answer 1

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.