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.