Ionic 5 translating and change event not performed

I developed an ionic 5 app and integrated language features.

It works but I have problem when I change language programmatically. I developed a page (setings.page) where user can change language manually

When he changes, in my setting.page.ts I trigger this code:

      this.translate.use(this.newLanguage).subscribe(data => {
        console.log("Language changed reloaded");

        this.translate.get('settings.language').subscribe((res: string) => {
          console.debug(res);
        });

      });

In settings.modules.ts I imported service:

@NgModule({
  imports: [
...
    TranslateModule.forChild()
  ],
  declarations: [SettingsPage]
})
export class SettingsPageModule {}

When the event is trigered, the page not is updated.

If I change settings.module.ts adding translate module configuration, it works.

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  imports: [
...
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    HeaderComponentModule
  ],
  declarations: [SettingsPage]
})
export class SettingsPageModule {}

In my app.module.ts:

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  declarations: [
    AppComponent
  ],

  entryComponents: [],
  imports: [
...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
...
  ],
  exports: [
    TranslateModule
  ],
  providers: [
...
  bootstrap: [AppComponent],
})
export class AppModule { }

I’d like to remove manual import from all page and insert configuration in the app.module.ts file.

What’s the best practice for my scenario?

Thanks
L

1 post - 1 participant

Read full topic