Having trouble with setting language in Ionic/Angular app with ngx-translate

Issue

I have an Angular/Ionic app that uses two languages:

en_US
es_MX

This is my current environment:

Ionic:

   Ionic CLI                     : 6.16.1 (/Users/me/.nvm/versions/node/v14.17.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.901.11
   @angular-devkit/schematics    : 9.1.11
   @angular/cli                  : 9.1.15
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.4.0) : 1.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/me/Library/Android/sdk)
   ios-deploy        : 1.11.4
   ios-sim           : 8.0.2
   NodeJS            : v14.17.0 (/Users/me/.nvm/versions/node/v14.17.0/bin/node)
   npm               : 6.14.13
   OS                : macOS Catalina
   Xcode             : Xcode 12.4 Build version 12D4e

I have created two language .json files and added them to my /assets/i18n folder for the translations.

I set my app.module.ts file I set my default language to en_US like this:

this.translate.setDefaultLang("en_US");

I have a splash screen that is loaded up by default that prompts the users which language they want to see the app in:

setLang(lang:string) {
    console.log(lang);
    this.translate.use(lang);
    this.router.navigateByUrl('/app/tabs/home', { replaceUrl: true });
  }

This sets the language correctly throughout the app, however, in my preferences, I give them the option to set the language back to a different choice:

updateAppLanguage() {
    console.log(this.appLanguage);
    this.translate.use(this.appLanguage);
}

If I set the language to es_MX in my splash, then when I update my language in the preferences it is working as expected. The language toggles each time.

However, if I set the language to en_US in my splash, then when I update my language in the preferences, the language does not toggle at all. It stays with English throughout the app.

Any thoughts on where I should look to try and trouble shoot this? I am not seeing any errors in the console or through linting.

Solution

I figured out the issue.

I noticed that when changing the languages in my preferences that the es_MX would return an empty result.

It appears the languages were not being preloaded.

To fix, in my preferences.module.ts I added this to the module imports:

import { HttpLoaderFactory } from '../../../app.module';

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

Answered By - zeropsi