Lazy loaded module is not adding the new custom translateLoader

I’m submitting a … (check one with “x”)

[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior When a lazy loaded module is being loaded it triggers the factory for create the new TranslateHttpLoader however it is not adding the translations in the file

Expected/desired behavior Load the translations of the lazy loaded module

Reproduction of the problem I can’t provide a plnkr because but this is the code that i’m using

export function  translateFactory(http: Http) {
        return new TranslateHttpLoader(http, '/metro-apps/maintenances/i18n/', '.json');
}
[...]
TranslateModule.forChild({
    loader: {
        provide: TranslateLoader,
        useFactory: translateFactory,
        deps: [Http]
    }
})

Please tell us about your environment: Kubuntu 16.04

• ngx-translate version: core=6.0.0 loader: 0.0.3

• Angular version: 2.4.7

• Browser: all

[k-schneider]

Just bumped into this as well.

I wanted my app module to fetch translations from “/assets/i18n/{lang}.json” and my lazy loaded modules to fetch from “/assets/i18n/{feature}/{lang}.json” but was unable to get this to work.

The custom loader configured by forChild(…) was ignored.

[sebelga]

I never managed to do it. So I created my own service to add translations to the root translateModule. I have a resolver for the routes accessing the lazyloaded module calling loadTranslationModule() before resolving.

@Injectable()
export class LocalizationService {
    private modulesTranslation: any = {};

    constructor(private http: Http, private translate: TranslateService) { }

    loadTranslationModule(module: string): Observable<any> {
        const lang = this.translate.currentLang || 'en';

        if (this.modulesTranslation[module] && this.modulesTranslation[module][lang]) {
            return Observable.of(this.modulesTranslation[module][lang]);
        }

        const uri = `assets/${module}/i18n/${lang}.json`;
        return this.http.get(uri)
            .map(res => res.json())
            .do((i18n: any) => {
                if (!this.modulesTranslation[module]) {
                    this.modulesTranslation[module] = {};
                }
                this.modulesTranslation[module][lang] = i18n;
                this.translate.setTranslation(lang, i18n, true); // add translation to global translations
                console.log(`[Localization] lang (${lang}) loaded for module (${module})...`);
            })
            .catch((err: any) => {
                console.log(`[Localization] lang (${lang}) not found for module (${module})`);
                return Observable.of({});
            });
    }
}