Получите NGX translate для работы в библиотеке рабочего пространства NX

Я пытаюсь заставить переводы работать как для компонентов приложения, так и для компонентов библиотеки. На данный момент я могу заставить работать только компоненты приложения или библиотеки, но не одновременно.

Состав:

  • Создал ионное приложение с домашним компонентом
  • Создана библиотека "features / ui" с компонентом входа в систему
  • Создал библиотеку "core / localization" с компонентом перевода (файлы перевода есть здесь, а в angular.json я копирую файлы в приложение)

Я могу заставить домашний компонент в приложении работать, если добавлю import TranslateModule и provider в libs / features / ui / ui.module.ts:

@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"

Я также могу заставить работать компонент входа в приложение, если вместо этого добавлю тот же импорт TranslateModule и provider в libs / core / core.module.ts

Если я добавлю код в два разных места одновременно, логин будет только переводить, но домашний компонент снова просто запишет ключ перевода "home.greet"

Также кажется неправильным инициализировать его дважды, поэтому где мне разместить свой импорт и поставщика для переводов и как мне выполнить перевод в обоих местах?


angular ngx-translate
person Michael Winther    schedule 06.05.2020    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Я смог решить то же самое, выполнив следующие шаги:

  1. Сохраняйте переводы, специфичные для библиотеки, в папке lib-> feature-> src-> assets-> i18n.

  2. Обновите приложение angular.json-> архитектор-> сборка-> параметры-> активы с помощью

    {"input": "libs / feature / src / assets / i18n", "glob": "* .json", "output": "assets / i18n / feature"}

  3. Обновите модуль Translate forChild () в Lib-> feature.module

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

  1. Запустите следующий эффект в функциональном модуле

 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

person Sal    schedule 11.05.2020