获取 NGX 翻译以在 NX 工作区库中工作

Question

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

结构：

创建了带有主页组件的离子应用程序
创建了一个带有登录组件的 "features/ui" 库
创建了一个带有翻译组件的 "core/localization" 库（我在这里和 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"

而且初始化它两次似乎是错误的，那么我应该把我的导入和翻译提供者放在哪里，我应该如何设法在这两个地方翻译？

Answer 1

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

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

{ "input": "libs/feature/src/assets/i18n", "glob": "*.json", "output": "assets/i18n/feature" }
更新 Lib->feature.module 中的翻译模块 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 的以下回购 https://github.com/tomastrajan/angular-ngrx-material-starter

获取 NGX 翻译以在 NX 工作区库中工作

Get NGX translate to work in a NX workspace lib

ngx-translate

angular