ngx-translate just working on browser and not in device android.

[kenkelvinmbaz]

I used ngx translate with globalization plugin to translate my app automatically to the language setup on the device. But in device just translate in the default language and i dont understand why. anyone can help?

This is the app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy, Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Routes, RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule }    from '@angular/common/http';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio/ngx';
import { Camera } from '@ionic-native/camera/ngx';
import { Clipboard } from '@ionic-native/clipboard/ngx';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';
import { Globalization } from '@ionic-native/globalization/ngx';


export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/','.json');
}
export const DEFAULT_LANGUAGE = 'pt';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(),TranslateModule ,TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
    }
}), AppRoutingModule,HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    FingerprintAIO,
    Camera,
    Clipboard,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    NativeStorage,
    Globalization
  ],
  bootstrap: [AppComponent]
})

export class AppModule {

  constructor(platform: Platform, translate: TranslateService, private globalization: Globalization) {

    platform.ready().then( () => {

        translate.setDefaultLang(DEFAULT_LANGUAGE);

        if ((<any>window).cordova) {
            this.globalization.getPreferredLanguage().then( result => {
                translate.use(result.value.toLowerCase());
            });
        } else {
            let browserLanguage = translate.getBrowserLang() || DEFAULT_LANGUAGE;
            translate.use(browserLanguage.toLowerCase());
        }

    });

}
}

This is the login.page.html

<form #form="ngForm" (ngSubmit)="login(form)" method="post" class="form-size">
  <ion-content fullscreen="true" class="background"  >
    <ion-grid>

       <div class="device-size">
        <ion-row class="ion-justify-content-center">
          <ion-col size-xs="11" size-md="11">
              <div align="center">
                <b class="text-color">{{'WELCOME_TITLE_LOGIN_PAGE' | translate }}</b>
              </div> 
      
                <div class="form-group">
                  <ion-label position="stacked" class="title text-color">{{'SET_EMAIL_LOGIN_PAGE' | translate }}</ion-label>
                  <div align="center" class="input-class">
                    <ion-input ngModel name="email" placeholder="{{'PLACE_HOLDER_EMAIL' | translate}}" type="email"></ion-input>
                  </div>
                </div>
                <div class="form-group">
                  <div class="line">
                    <ion-label position="stacked" class="title text-color">{{'SET_PASSWORD_LOGIN_PAGE' | translate}}<ion-icon [name]="showPassword ? 'eye-off' : 'eye'" (click)="onPasswordToggle()" style="margin-top: 5px;"></ion-icon></ion-label>
                    <div align="center" class="input-class">
                      <ion-input ngModel name="password" placeholder="{{'PLACE_HOLDER_PASSWORD' | translate}}" [type]="showPassword ? 'text' : 'password'" clearOnEdit="false"> 
                      </ion-input>
      
                    </div>
                  </div>
                </div>
      
                <div class="form-group btn-size-bottom">
                  <ion-button  type="submit" expand="block" color="primary"><ion-spinner *ngIf="loading"></ion-spinner> {{ 'LOGIN_BUTTON_LOGIN_PAGE' | translate}} <ion-icon name="checkmark-done"></ion-icon></ion-button>
                 </div>
                 <div class="form-group btn-size-bottom ">
                  <ion-label position="stacked" class="title text-color" style="font-size: 12px;" (click)="forgetPassword()">{{ 'PASSWORD_LOST' | translate}}?</ion-label>
                 </div>
      
                 <ion-row>
                    <ion-col size="9">
                      <p class="text-color">{{ 'SIGNIN_BUTTON_LOGIN_PAGE' | translate}}</p>
                    </ion-col>
                    <ion-col siez="2">
                      <ion-icon name="chevron-forward-circle" (click)="back_to_contact()" class="large text-color"></ion-icon>
                    </ion-col>
                </ion-row>
      
          </ion-col>
        </ion-row>
       </div>

    </ion-grid>
  </ion-content>
</form>

This is the Login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';
import { TranslateModule } from '@ngx-translate/core';
import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LoginPageRoutingModule,
    TranslateModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}