ngx-translate 在延迟加载模块中不显示任何文本

Question

我们在应用程序中使用 Angular 6。我们最近开始为延迟加载准备我们的应用程序。应用程序有多个延迟加载的路由。我们想为所有路线使用单一语言文件（不需要将其分成块。但在 bootstrap 上加载所有翻译）。

我尝试的第一件事就是在 AppModule (forRoot) 中导入和配置 ngx-translate，而不是其他任何地方。为此，我使用以下代码为 TranslateModule 创建了一个配置文件：

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},
};

这仅适用于急切加载的路线。对于延迟加载，所有文本都是空的。

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

两种方法都行不通。延迟加载路由中的所有文本字段都是空的。

有没有人遇到过类似的问题？我在网上搜索但找不到任何具体的解决方案。如何正确地将同一文件的翻译应用到延迟加载的模块？

Answer 1

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

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

共享模块：

@NgModule({
    imports: [TranslateModule.forChild({})],
  exports: [TranslateModule]
})
export class SharedModule {
    constructor(private translate: TranslateService) {
        translate.addLangs(['en', 'ru']);
        translate.setDefaultLang('en');
        translate.use('en');
    }
}

然后将 SharedModule 导入到所有延迟加载的模块中。

此外，和以前一样，我将带有 forRoot(TRANSLATE_CONFIG) 方法的 TranslateModule 导入 AppModule。

TranslateModule.forRoot(TRANSLATE_MODULE_CONFIG)

希望这会有所帮助。

Answer 2

当导入到不是根组件的组件时，我使用了以下内容：

TranslateModule.forChild({
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  },
  isolate: false,
  extend: true
})

我必须设置 'isolate: false' 才能正常工作，花了我几天时间，非常令人沮丧

ngx-translate 在延迟加载模块中不显示任何文本

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

lazy-loading

ngx-translate

angular

angular6