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

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?

I think I had a similar issue, I added the ngx-translate library to a shared module. And then added that shared module to all my lazy loaded module. — Taranjit Kang
– Taranjit Kang, Commented Jun 22, 2018 at 19:01

Daniil Andreyevich Baunov · Accepted Answer · 2018-06-23 11:13:57Z

19

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.

answered Jun 23, 2018 at 11:13

Daniil Andreyevich Baunov

2,8833 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marvin Zumbado Over a year ago

I wish I had seen this post 4 hours ago, this is the perfect answer and it fixes the issue

chgav007 Over a year ago

This is the only true answer for translation in lazy loaded or any other modules. I am lucky enough to see this within few hours .

yutoliho · Accepted Answer · 2021-02-12 20:41:23Z

1

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

answered Feb 12, 2021 at 20:41

yutoliho

1751 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related