ngx-translate не работает для ленивого загруженного модуля

Я хочу реализовать ngx-translate в ленивом загружаемом модуле проекта angular 5, который работает только с родительским модулем, но не работает в моем дочернем модуле, поэтому, пожалуйста, предложите лучшее решение.

Я пишу свой код для модуля приложения.

и я использую @ ngx-translate / core и @ ngx-translate / http-loader

app.module.ts

 TranslateModule.forRoot({
      @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    LayoutModule,
    HttpClientModule,
    BrowserAnimationsModule,
    HttpModule, ReactiveFormsModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false }
    ),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/app/', '.json');

}

child.module.ts

@NgModule({
  imports: [

    RouterModule,
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    GridModule,
    DropDownsModule,
    FormsModule,
    ExcelModule,
    ControlMessagesModule, ReactiveFormsModule,    
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (AdminTranslateLoader),
        deps: [HttpClient]
      },
      isolate: true
    })

  ],

export function AdminTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/admin/', '.json');
}

localization angular ngx-translate
person vishnu    schedule 12.07.2018    source источник
comment
Попробуйте использовать один и тот же путь './assets/i18n/app/' для обоих модулей и посмотрите, работает ли он. Я использую один и тот же файл в разных модулях, и он мне подходит   -  person Yousef khan    schedule 12.07.2018
comment
Мое требование - сохранить перевод в другом файле json, например, в модуле, и сохранить конкретный перевод в конкретном примере файла, если модуль администратора загружен, тогда будет загружен только admin / en-json, и для перевода должен быть загружен только перевод администратора   -  person vishnu    schedule 13.07.2018

Ответы (3)


arrow_upward
5
arrow_downward

У меня была аналогичная проблема, когда я вызывал TranslateModule.forRoot () в SharedModule:

TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
    }
})

Этот SharedModule импортируется всеми моими другими модулями с отложенной загрузкой. У меня есть дочерний компонент menu-bar с кнопкой для переключения языка. Этот компонент получает TranslateService посредством инъекции обычным способом конструктора:

constructor(private translate: TranslateService) { }

Эта проблема

Вызов TranslateService.use('[LANG-CODE]') меняет перевод в моем компоненте строки меню. Но это не изменило перевод для других дочерних компонентов.

Это сработало для меня

Я обнаружил эту (довольно старую) проблему на github, в которой говорится, что мы не должны вызывать TranslateModule.forRoot () в SharedModule.

проблема с github - TranslateModule.forRoot не следует помещать в SharedModule

Итак, я переместил TranslateModule.forRoot() в AppModule, как было предложено, и экспортировал TranslateModule. Затем я импортирую и экспортирую TranslateModule в свой SharedModule.

После этого вызов TranslateService.use() переводит тексты и для других дочерних компонентов, а не только для того, который вызывает функцию (menu-bar в моем случае)

Надеюсь, это будет полезно для всех, у кого есть подобная проблема.

person Glen Au-Yeung    schedule 10.06.2019

arrow_upward
0
arrow_downward

У меня была такая же проблема с моим Angular 12 проектом.

Настроил проект как:

  1. Добавлено TranslateModule.forRoot() в app.module.ts лайки
export function httpLoaderFactory(http: HttpClient){
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    TranslateModule.forRoot(
      {
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        deps: [HttpClient]
      }
    }
    ),
  ]
})
export class AppModule { }
  1. Импортировано и экспортировано TranslateModule в моем SharedModule.
  2. Импортировал SharedModule в модуль Lazy Loaded Component Module.
  3. Он будет работать без сбоев.
person Viplav Soni    schedule 20.07.2021

arrow_upward
-1
arrow_downward

Я думаю, вам нужно установить язык по умолчанию! Например :

export class ChildModule {
 constructor(private readonly translate: TranslateService) {
    translate.setDefaultLang(translate.getBrowserLang());
  }
}
person Mohamed Gontara    schedule 31.10.2018