Side menu values not working on device

Ionic Framework ionic-v3
1

Hi all,
When a user logs into our application, the side menu contains a countdown timer for there permitted access duration and the users email address.

Using the simulator, these values are present upon login. However when launched on a device, the values are not displayed until the user exits the application and re-launches.

I can only assume I am doing something wrong in my app.components.ts which is shown below.

import pkg from '../../package.json';

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, AlertController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { TranslateService } from 'ng2-translate';

import { JobListPage } from '../pages/job-list/job-list';
import { SettingsPage } from '../pages/settings/settings';
import { SupportPage } from '../pages/support/support';
import { LoginPage } from '../pages/login/login';

import { Storage } from '@ionic/storage';
import { LocalStorageService } from '../providers/local-storage-service';
import { I18nService } from '../providers/i18n-service';
import { AccountService } from '../providers/account-service';
import { AccessTtlService } from '../providers/access-ttl-service';

// @todo move to json file
const LANGUAGES = {
  'عربى': 'ar',
  'Deutsche': 'de',
  'English': 'en',
  'Français': 'fr',
  'Russisch': 'ru',
  'Español': 'es',
  'Dansk': 'da',
  'Italiano': 'it',
  '中文': 'zh',
  'Polskie': 'pl',
  'Cymraeg': 'cy',
  'Ελληνικά': 'el'
};

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

  rootPage: any;
  pages: Array<{title: string, component: any, icon: string}>;

  lang: string;
  version: string;
  user: any;

  timer: string;

  constructor(
    private platform: Platform,
    private storage: Storage,
    private local: LocalStorageService,
    private language: I18nService,
    private account: AccountService,
    private alert: AlertController,
    private i18n: TranslateService,
    private access: AccessTtlService
  ) {
    this.initializeApp();

    this.access.counter();

    this.pages = [
      { title: 'JOBS', component: JobListPage, icon: 'clipboard' },
      { title: 'SETTINGS', component: SettingsPage, icon: 'settings' },
      { title: 'SUPPORT', component: SupportPage, icon: 'help-buoy' }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.storage.ready().then(() => {
        console.log('LocalStorage available');
        this.language.lang()
        .then((lang) => {
          this.language.set(LANGUAGES[lang] || 'en');

          this.language.watch.subscribe(
            data => this.lang = data
          );
        })
        .then(() => this.account.getAccount())
        .then((account) => {
          this.version = pkg.version;

          StatusBar.styleLightContent();
          Splashscreen.hide();

          if (account) {
            this.access.ttl.subscribe(result => {
              if (result != '00:00:00') {
                this.timer = result;
              } else {
                this.access.clear()
                .then(
                  () => this.account.removeAccount()
                )
                .then(() => this.rootPage = LoginPage);
              }
            });

            this.user = account;
            this.rootPage = JobListPage;
          } else {
            this.rootPage = LoginPage;
          }
        });
      });
    }).catch(error => Error(error));
  }

  public countdownHelp() {
    let alert = this.alert.create({
      title: this.i18n.instant('INFO'),
      subTitle: this.i18n.instant('COUNTDOWN_HELP'),
      buttons: [this.i18n.instant('OK')]
    });
    alert.present();
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }
}

If anyone can spot an immediate issue with the code above or shed some light into what’s going wrong it would be greatly appreciated.

Thanks in advance :+1:

Karl