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.

然后我尝试在延迟加载的模块中使用 forChild() 方法与 TranslateModule 的相同配置(如这里所写 - 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.

共享模块:

@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屋！