translate.use(langCode) is not working in some cases

Current behavior

In app.component.ts I have set up the TranslateService as follows:

translate.addLangs(['en', 'bn']);
translate.use('en');

translate.onLangChange.subscribe((change) => {
      console.log('langChange', change);
})

In another module, I’m doing this to change the current language,

this.translate.use(langCode);

When I change the language to bn, it does not work.

BUT, if I write translate.use('bn'); in app.component.ts, language change starts working.

What I’ve noticed is that, when I set en as the language in app.component.ts the onLangChange prints an empty object as the translations property.

// in onLangChange callback 
Object { lang: "bn", translations: {} }

Expected behavior

Changing language should work regardless of what language was set during initialization

How do you think that we should fix this?

Minimal reproduction of the problem with instructions

Environment

ngx-translate version: 13.0.0
Angular version: 10.1.5


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ x] Firefox version 81
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12.16   
- Platform:   Windows

Others:

[sguilly]

This workaround works for me (angular 11 et ionic 5) :

I force to load all possible language in app.components :

this.translate.addLangs([‘fr’, ‘en’, ‘es’, ‘de’])

this.translate.use(‘en’) this.translate.use(‘es’) this.translate.use(‘de’) this.translate.use(‘fr’)

then in other component, i can call again this.translate.use(‘xxx’)

This issue was not present in previous version for angular 8

[joseph-navant]

Hi guys! I also noticed this “issue”. After a few attempts, I got it by using same loader config in forChild as in forRoot:

app.module.ts (can be core.module or whatever):

export const HttpLoaderFactory = (httpClient: HttpClient) => {
  return new ...
};

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts:

export class AppComponent {
  constructor(private readonly translateService: TranslateService) {
    this.setDefaultLang();
  }

  private setDefaultLang() {
    this.translateService.addLangs(['en', 'fr', 'es-ES', 'es-419']); // array of available langs
    this.translateService.setDefaultLang('es-ES');
  }
}

lang-test-module.ts (the module from where we want to change lang):

import { HttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpLoaderFactory } from 'src/app/app.module.ts';
...
@NgModule({
  imports: [
    ...,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  declarations: [LangTestPage],
})
export class LangTestModule {}

I don’t know if it is a good solution…