Ngx-translate.. translate.get stopped working all of a sudden


#1

Hello everybody,

I am new to ionic and I am developing my first application, pardon me for my poor English since it is not my mother tongue.

I had ngx-translate working and when I updated my package.json it stopped working. I searched for the issue and made it to work but I still have only one issue that it is not working.

I have a simple straight forward method to detect the current hour and depending on that it displays greeting
(Good morning/ Good afternoon / Good evening) in both English and Arabic.

The problem is that all the words get translated and display the value of the property except that method because I use translate.get(“Key”) as shown below :

 welcomeText(date) {
    debugger;
    if (date > 5 && date < 12) {
      this.translate.get('goodmorning').subscribe(d => this.welcome = d);
    }
    else if (date >= 12 && date < 17) {
      this.translate.get('goodafternoon').subscribe(d => this.welcome = d);
    }
    else {
      this.translate.get('goodevening').subscribe(d => this.welcome = d);
    }
  }

My en.json

{
  "readings": "READINGS",
  "groups": "GROUPS",
  "bookmarks": "BOOKMARKS",
  "repetitions": "Repetitions",
  "contradictions": "Contradictions",
  "conjunctions": "Conjunctions",
  "characters": "Characters",
  "goodmorning": "Good morning",
  "goodafternoon": "Good afternoon",
  "goodevening": "Good evening",
  "questionheader": "Question to think of"
}

My ar.json

{
  "readings": "قراءات",
  "groups": "مجموعات",
  "bookmarks": "ايات مختارة",
  "repetitions": "تكرار",
  "contradictions": "مضادات",
  "conjunctions": "أدوات الربط",
  "characters": "شخصيات",
  "goodmorning": "صباح الخير",
  "goodafternoon": "مساء الخير",
  "goodevening": "مساء الخير",
  "questionheader": "سؤال للتفكير"
}

my app.module.ts

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  imports: [
    HttpModule,
    BrowserModule,
    HttpClientModule,
    AutosizeModule,
    // ResourceModule.forRoot(),
    // IonicModule.forRoot(MyApp),
    IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false }),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })

  ],```


export function createTranslateLoader(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, ‘./assets/i18n/’, ‘.json’);
}```

My app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Keyboard } from '@ionic-native/keyboard';
import { ReadingAppManager } from '../SourceCode/ReadingAppManager';
import { TranslateService } from '@ngx-translate/core';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public readingAppManager: ReadingAppManager, keyboard: Keyboard, translate: TranslateService) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      debugger;
      statusBar.styleDefault();
      splashScreen.hide();
      keyboard.disableScroll(false);
      this.readingAppManager.OnApplicationStart();
      translate.setDefaultLang('en');

      translate.use('en');
    });
  }
}

my package.json

{
    "name": "newreading",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.4.3",
        "@angular/compiler": "4.4.3",
        "@angular/compiler-cli": "4.4.3",
        "@angular/core": "4.4.3",
        "@angular/forms": "4.4.3",
        "@angular/http": "4.4.3",
        "@angular/platform-browser": "4.4.3",
        "@angular/platform-browser-dynamic": "4.4.3",
        "@ionic-native/core": "4.3.0",
        "@ionic-native/dialogs": "4.3.1",
        "@ionic-native/http": "4.3.1",
        "@ionic-native/keyboard": "4.3.2",
        "@ionic-native/native-storage": "4.3.1",
        "@ionic-native/social-sharing": "4.3.1",
        "@ionic-native/spinner-dialog": "4.3.1",
        "@ionic-native/splash-screen": "4.3.0",
        "@ionic-native/status-bar": "4.3.0",
        "@ionic/storage": "2.0.1",
        "@ngx-translate/core": "8.0.0",
        "@ngx-translate/http-loader": "2.0.0",
        "angular2-autosize": "git+https://github.com/chrum/angular2-autosize.git",
        "cordova-android": "6.2.3",
        "cordova-plugin-advanced-http": "1.6.1",
        "cordova-plugin-compat": "1.0.0",
        "cordova-plugin-console": "1.0.5",
        "cordova-plugin-device": "1.1.4",
        "cordova-plugin-dialogs": "1.3.3",
        "cordova-plugin-file": "4.3.3",
        "cordova-plugin-native-spinner": "1.1.3",
        "cordova-plugin-nativestorage": "2.2.2",
        "cordova-plugin-splashscreen": "4.0.3",
        "cordova-plugin-statusbar": "2.2.2",
        "cordova-plugin-whitelist": "1.3.1",
        "cordova-plugin-x-socialsharing": "5.2.0",
        "es6-promise-plugin": "4.1.0",
        "http-client": "^4.3.1",
        "ionic-angular": "3.7.1",
        "ionic-plugin-keyboard": "2.2.1",
        "ionic2-extend-alert": "0.0.2",
        "ionicons": "3.0.0",
        "ngx-resource": "3.6.1",
        "rxjs": "5.4.3",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@ionic/app-scripts": "3.0.0",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-nativestorage": {},
            "cordova-plugin-x-socialsharing": {},
            "cordova-plugin-dialogs": {},
            "cordova-plugin-advanced-http": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-native-spinner": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        },
        "platforms": [
            "android"
        ]
    }
}

Looking forward to find a solution.
Thanks in advance.

Best regards,
Steven Francis.

UPDATE : I fixed the issue … that method was in my rootpage, it was called before the app calls my app.component.ts

 constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public readingAppManager: ReadingAppManager, keyboard: Keyboard, translate: TranslateService) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      debugger;
      statusBar.styleDefault();
      splashScreen.hide();
      keyboard.disableScroll(false);
      this.readingAppManager.OnApplicationStart();
      translate.addLangs(['en','ar']);
      translate.setDefaultLang('en');
    // Listen for changes
    translate.onLangChange.subscribe((event:LangChangeEvent) => {
      console.log('onLangChange', event.translations)
    });

      translate.use('en');
    });
  }

so I had to call that welcomeText() method in the ionViewWillEnter()

ionViewWillEnter(){
    this.welcomeText(this.date);
    this.username = 'Steven Francis';
  }

if there is a better solution I would appreciate it.