让 NGX 翻译在 NX 工作区库中工作答案

【问题标题】：Get NGX translate to work in a NX workspace lib让 NGX 翻译在 NX 工作区库中工作
【发布时间】：2020-05-06 13:25:52
【问题描述】：

我正在尝试让应用程序组件和库组件的翻译工作。目前我只能让 app 或 lib 组件工作，但不能同时工作。

结构：

创建了一个带有 home 组件的 ionic 应用
创建了一个带有登录组件的“features/ui”库
创建了一个带有翻译组件的“核心/本地化”库（我在这里有翻译文件，在 angular.json 中我将文件复制到应用程序）

如果我在 libs/features/ui/ui.module.ts 中添加 import TranslateModule 和 provider，我可以使应用程序中的 home 组件工作：

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormsModule,
    CommonModule,
    ToastrModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
     }
})],
providers: [
  {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [TranslateService, Injector],
      multi: true
  }
],
declarations: [LoginComponent],
exports: [
  LoginComponent
]
})

现在登录的翻译工作了，但是主页组件只写出翻译键“home.greet”

如果我改为在 libs/core/core.module.ts 中添加相同的导入 TranslateModule 和提供程序，我也可以使应用程序中的登录组件工作

如果我同时在两个不同的地方添加代码，登录只会翻译，但是home组件再次只是写出翻译键“home.greet”

另外，初始化两次似乎是错误的，那么我应该将我的导入和提供者放在哪里进行翻译，以及我应该如何设法在这两个地方进行翻译？

【问题讨论】：

标签： angular ngx-translate

【解决方案1】：

我能够通过以下步骤解决同样的问题：

在 lib->feature->src->assets->i18n 文件夹中维护 lib 特定的翻译。
更新 angular.json app->architect->build->options->assets with

{ “输入”：“库/功能/src/assets/i18n”， "glob": "*.json", “输出”：“资产/i18n/功能” }
更新 Lib->feature.module 中的 Translate 模块 forChild()

TranslateModule.forChild({
          loader: {
            provide: TranslateLoader,
            useFactory: (http: HttpClient) => {
              return new TranslateHttpLoader(
                http,
                `${environment.i18nPrefix}/assets/i18n/feature/`,
                '.json'
              );
            },
            deps: [HttpClient]
          },
          isolate: true
        })

在功能模块中触发以下效果

 setTranslateServiceLanguage$ = createEffect(
    () =>
      this.store.pipe(
        select(selectSettingsLanguage),
        distinctUntilChanged(),
        tap(language => this.translateService.use(language))
      ),
    { dispatch: false }
  );

感谢以下来自 tomastrajan 的 repo https://github.com/tomastrajan/angular-ngrx-material-starter

【讨论】：