ngx-translate在延迟加载的模块中未显示任何文本 [英] ngx-translate not showing any text in lazy-loaded module

问题描述

我们在应用程序中使用Angular 6.我们最近开始为延迟加载准备我们的应用程序.应用程序具有多个延迟加载的路由. 我们希望对所有路由使用单个语言文件(不需要将其分成多个块，而是将所有翻译加载到引导程序上).

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).

我尝试的第一件事就是在AppModule(forRoot)中导入和配置ngx-translate，除此之外没有其他地方.为此，我使用以下代码创建了TranslateModule的配置文件:

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.

然后，我尝试在具有相同TranslateModule配置的延迟加载模块中使用forChild()方法(如此处所写- ngx-translate ).结果相同. 我还尝试了简单地将TranslateModule导入到延迟加载的模块中，而不为其提供任何配置..

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?

推荐答案

已成功解决此问题.以一种非常出乎意料的方式. 首先，正如Taranjit Kang所述，我使用forChild({})方法将TranslateModule导入到SharedModule中，并传入一个空对象.并导出它.

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.

此外，我在SharedModule中创建了一个构造函数，注入了TranslateService并使用所有适当的东西对其进行了初始化.

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

SharedModule:

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导入所有延迟加载的模块.

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

而且，像以前一样，我使用forRoot(TRANSLATE_CONFIG)方法将TranslateModule导入到AppModule中.

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

TranslateModule.forRoot(TRANSLATE_MODULE_CONFIG)

希望这会有所帮助.

这篇关于ngx-translate在延迟加载的模块中未显示任何文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！