@vigneshwaran2694 wrote:

Hi Im new to ionic,

I have build a app, and i ve used a plugin “@ionic-native/app-minimize”: “^4.20.0”

this plugin minimise the app on button click, when i again open the app i need to call a function like init()…

please help…

I ve tried

ionViewDidLoad() {
alert(“ionViewDidLoad”);
}

not worked…

Posts: 1

Participants: 1

Read full topic

@elduderino15 wrote:

Works for iOS, but fails in Android with replacing AM / PM with …

Here’s the code that works for iOS

<ion-datetime  #datePicker
		text-center
		(ionChange)="dateChanged($event)"
  displayFormat="hh:mm A" 
  minuteValues="0,10,20,30,40,50"
  [(ngModel)]="time"
  (ionCancel)="navCtrl.pop()"
  >

on iOS the above code allows the user to scroll through and select either AM / PM

kpSbl.jpg967×1134 169 KB

Posts: 1

Participants: 1

Read full topic

@vishalionic1271 wrote:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1) 

local packages:

@ionic/app-scripts : 3.2.0
Cordova Platforms  : android 8.0.0 browser 6.0.0 ios 5.0.1
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.4 
ios-sim           : 8.0.1 
Node              : v10.15.3
npm               : 6.4.1 
OS                : macOS
Xcode             : Xcode 10.2.1 Build version 10E1001

Posts: 1

Participants: 1

Read full topic

@KsspAm43 wrote:

How to Create N Details Page.
Here is My Json Structure

"categories":[{"name":"category","child-categories":"[{"name":"child_category","child-categories":"[{},{},{}]"},{},{}]",}]

In Ionic 4, I created a Category Page.If it has child_categories, it dig down to self with that data.
category.page.ts

openCategories(category){
let temp_breadcrumbs:any;
temp_breadcrumbs=JSON.parse(JSON.stringify(this.breadcrumbs));
temp_breadcrumbs.push(category.name)
let navigationExtras: NavigationExtras = {
queryParams:{‘name’ : category.name},
queryParamsHandling: ‘merge’ ,
state:{
‘categories’: category.child_categories,
‘breadcrumbs’:temp_breadcrumbs
}
};
//this.navCtrl.navigateForward([“tabs/tab1/child-category”],navigationExtras); I Tried This Also.
this.router.navigate([“tabs/tab1/category”],navigationExtras).then(val=>{console.log(val)},
rej=>{console.log(rej)}).catch(val=>{
console.log(val);
});

I don’t know why ionic 4 not open self as new page with navigation extras…

Posts: 1

Participants: 1

Read full topic

@mekbebworku wrote:

Hi,

SocialSharing plugin crashes during ionic serve despite it is added in the app.module providers array and injected on my screen’s constructor. Error message is below

index.js:413 Uncaught TypeError: Object(…) is not a function
at index.js:413
at Module…/node_modules/@ionic-native/social-sharing/index.js (index.js:590)
at webpack_require (bootstrap:83)
at Module…/src/app/app.module.ts (app.component.ts:11)
at webpack_require (bootstrap:83)
at Module…/src/main.ts (main.ts:1)
at webpack_require (bootstrap:83)
at Object.0 (main.ts:12)
at webpack_require (bootstrap:83)
at checkDeferredModules (bootstrap:45)

and the version info is

ionic info

Ionic:

Ionic CLI : 5.0.0 (C:\Users\xxxxx\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.5.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (1 plugins total)

Utility:

cordova-res : not installed
native-run : not installed

System:

Android SDK Tools : 26.1.1 (C:\Users\xxxxx\AppData\Local\Android\Sdk)
NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

Thanks in advsnce

Posts: 1

Participants: 1

Read full topic

@BrankoEnero wrote:

I want to display a list of options when a file is gotten by using a type file native input element. The list of options that I usually got when I programming for web is: camera, video, recorder and device directories & files.

This way:

Screenshot_20190628-081223_Android System 2.jpg1079×734 49.9 KB

Expected behavior:

It expects that, by using the same code of web the behavior will be the same:

<input type="file" capture />

Example: http://jsfiddle.net/4WHw5/3/show

Open it in a android device

Actual behavior:

It displays just a device directories and files.

Information about the issue:

Ionic CLI : 5.0.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.5.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Steps to reproduce the behavior:

1. Create a new tabs template Ionic project.
2. Write into tab1.page.html: <input type="file" capture />
3. Build and deploy in android device.
4. Press input.

Posts: 1

Participants: 1

Read full topic

@ctfrancia wrote:

This is a strange one that I can’t quite understand and I think that showing the code first will be best

component.ts

    this.camera.getPicture(options).then(
      (imageData: string): void => {
        const mp4Checker = imageData.slice(-3);
        if (mp4Checker === 'mp4') {
           console.log('imageData', imageData); // <-- 'path/to/storage/file.mp4'
           message.video = imageData;
           console.log('after assignment', message.video); // <-- 'path/to/storage/file.mp4'
           this.chatService.sendVideo(message);
         } else {
           console.log('imageData', imageData); //<-- 'string/to/storage/file.jpg'
           message.image = imageData;
           console.log('after assignment', message.image); // <-- undefined
           this.chatService.sendMessage(message);
         }
        this._uploadMedia(imageData);
      },
      err => {
        console.log('error -->', err);
      },
    );

now If I move the logic to separate function it fixes the undefined problem:

    this.camera.getPicture(options).then(
      (imageData: string): void => {
        this._uploadMedia(imageData);
      },
      err => {
        console.log('error -->', err);
      },
    );

  private _uploadMedia(media: string): void {
    const mp4Checker = media.slice(-3);
    console.log('_uploadMedia', media, mp4Checker);
    if (mp4Checker === 'mp4') {
      message.video = media;
      console.log('look at message.video', message); // <--'path/to/storage/file.mp4'
    } else {
      message.image = media;
      console.log('look at message.image', message); //<--'path/to/storage/file.jpg'
    }
  }

Why in the first example can I not assign it but after passing the reference to the helper function I am only then finally able to?

Posts: 1

Participants: 1

Read full topic

@VictorNorman wrote:

I am trying to use cordova’s ScreenOrientation module to get screen orientation changes. Using their example online, I’ve written this code in my app.component.ts:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private so: ScreenOrientation,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      console.log('orientation is', this.so.type);
      this.so.onChange().subscribe(() => {
        console.log('orientation changed to ', this.so.type);
      });
    });
  }

}

When I run my app – and this is a brand new ionic project with no other changes – I see this error in the logs:

ERROR TypeError: Invalid event target
    at setupSubscription (fromEvent.js:50)
    at Observable._subscribe (fromEvent.js:24)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
    at app.component.ts:28
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
defaultErrorLogger @ core.js:15724

Does anyone know what this means and how to fix it? My subscriptions to the onChange events do not work, so I’m not getting the orientation changes.

(This is Ionic 4.)

Posts: 1

Participants: 1

Read full topic

@Seikida wrote:

Hello,

how can i render ion-content fixed while being scrollable inside?
Do you have example code ?

Thank you

Posts: 2

Participants: 2

Read full topic

@Rishab24 wrote:

on click on button can i create new page automatically in ionic 3

or

automatic tab in ionic 3

please help team

Posts: 1

Participants: 1

Read full topic

@Mmatic90 wrote:

Hi there!

I’m trying to find out if there is a way to observe or if an event is fired for all the alerts and loading dismisses in a page, where i have to setFocus() on an input where a scanner have to write.

The thing is that I have a async service function that provides me info about the product code scanned, and this one have a loading that cancel the myAlert.onDidDismiss().then(() => { this.myInput.setFocus() }).

    const editAlert = await this.alertController.create({
      header: 'Editando Packs de:',
      message: `<p>` + itemToEdit.sscc + `</p>
                <p>` + itemToEdit.layout + `</p>`,
      inputs: [
        {
          name: 'packs',
          type: 'number',
          value: itemToEdit.packs,
          placeholder: 'Nº de Packs'
        }
      ],
      buttons: [
        {
          text: 'Volver',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            option.close();
            this.ssccInput.setFocus();
          }
        },
        {
          text: 'Confirmar',
          handler: async data => {
            if (itemToEdit.packs !== data.packs) {
              if (data.packs > originalProduction[0].packs) {
                await this.alertWithTimeoutAndSetFocusOnSSCC(
                  'Error',
                  'El número de packs especificado <strong>supera</strong> a los disponibles',
                  2000
                );
              } else {
                let newNumberOfBottles = (data.packs * itemToEdit.bottles) / itemToEdit.packs;
                let newWeightOfSSCC = Math.round(((itemToEdit.weight * newNumberOfBottles) / itemToEdit.bottles) * 10) / 10;
                itemToEdit.bottles = newNumberOfBottles;
                let oldWeightOfSSCC = itemToEdit.weight;
                this.currentLoad -= oldWeightOfSSCC;
                this.currentLoad += newWeightOfSSCC;
                itemToEdit.weight = newWeightOfSSCC;
                itemToEdit.packs = data.packs;
                this.sqlServerServices.updateEditedTransaction(
                  this.newWaybillSleepId,
                  newNumberOfBottles,
                  data.packs,
                  newWeightOfSSCC,
                  itemToEdit.sscc
                ).then(() => {
                  option.close();
                  this.ssccInput.setFocus();
                });
              }
            }
          }
        }
      ]
    });
    editAlert.present();

    editAlert.onDidDismiss().then(() => {
      this.ssccInput.setFocus();
    });

I have also tryied what im used to use async await, but nothing changes.

                itemToEdit.packs = data.packs;
                await this.sqlServerServices.updateEditedTransaction(
                  this.newWaybillSleepId,
                  newNumberOfBottles,
                  data.packs,
                  newWeightOfSSCC,
                  itemToEdit.sscc
                );
                option.close();
                this.ssccInput.setFocus();
              }
            }
          }
        }
      ]
    });
    editAlert.present();

    editAlert.onDidDismiss().then(() => {
      this.ssccInput.setFocus();
    });

With and without the onDidDismiss at the end.

Posts: 1

Participants: 1

Read full topic

@sebinbenjamin wrote:

How to align ion-menu in the ionic4 sidemenu starter project?

Posts: 1

Participants: 1

Read full topic

@Siegz wrote:

Hi guys. We have a bluetooth android project where we have to do a bluetooth scan between certain intervals, (I am using BluethoothLE) and send information to the backend server if the user is near a BLE beacon. This is all working fine, but now i am running into a wall with keeping the service running when the user presses the power button. What is the correct way to implement this kind of functionality? I tried to look into backgroundmode and foreground service but it really didn’t give me a clear picture.

Posts: 1

Participants: 1

Read full topic

@Shivendra-Parmar wrote:

(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Posts: 1

Participants: 1

Read full topic

@albertix wrote:

Ionic:

   Ionic CLI                     : 5.2.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Utility:

   cordova-res : 0.2.0 (update available: 0.5.1)
   native-run  : 0.2.0 (update available: 0.2.7)

System:

   NodeJS : v10.15.0 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS High Sierra

package.json

{
  "name": "Ionic4VirtualInfiniteScrollDemo",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/node": "~12.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project"
}

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Infinite Scroll
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">

    <ion-list>
      <ion-item *ngFor="let item of items">{{item}}</ion-item>
    </ion-list>

    <ion-infinite-scroll threshold="250px" (ionInfinite)="loadData($event)" [disabled]="numTimesLeft <= 0">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="Loading more data...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

  </div>
</ion-content>

home.page.ts

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  items = [];
  numTimesLeft = 5;

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  constructor() {
    this.addMoreItems();
  }

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      this.addMoreItems();
      this.numTimesLeft -= 1;
      event.target.complete();
    }, 2000);
  }

  addMoreItems() {
    for (let i=0; i<20; i++)
      this.items.push(i);
  }

}

Not working on fresh blank project.
I’ve installed this (exactly the same code)
git clone https://github.com/JamiBot/Ionic-4-Infinite-Scroll-Example.git

And unique difference is “package-lock.json” file

Any idea to make infinite scroll working ?

Posts: 1

Participants: 1

Read full topic

@pantarmj wrote:

How to use hardware back button to close loading (when it is pressed during loading) or to go to previous page (when the page is not selected from menu) or to exit the app (if the page is selected from menu)…

I was implemented above functionality in ionic 3 (as shown below) how to achieve the same in ionic 4?

constructor(private ionicApp: IonApp) { 

}

this.platform.backButton.subscribe(async () => {	
                let activePortal = this.ionicApp.getActive() || this.ionicApp._modalPortal.getActive() || this.ionicApp._overlayPortal.getActive();
                if (activePortal) {
                    activePortal.dismiss();
                }
                else if (this.nav.canGoBack()) {
                    this.nav.pop();
                } else {
                    let confirm = await this.alertCtrl.create({
                        header: 'Confirm',
                        message: 'Do you want to exit ?',
                        buttons: [
                            {
                                text: 'Cancel', handler: () => { }
                            },
                            {
                                text: 'Ok',
                                handler: () => {
                                    this.platform.exitApp();
                                }
                            }
                        ]
                    });
                    await confirm.present();
                }
            });

Posts: 1

Participants: 1

Read full topic

@jsanta wrote:

Hi. I willing to try Ionic Studio and test if it meets my needs when developing Ionic apps, but forcefully I require a Mac or a Windows computer, and I’m a Linux user.
I know that my “solution” would be something like “Install Windows and try”, or “Test if it works using wine”, but I think that if you already have the Windows and Mac versions, compiling a Linux version shouldn’t be so complicated.

Are there any plans for a Linux version? or anything in the product roadmap that includes Linux in some way?
Thanks.

Posts: 1

Participants: 1

Read full topic

@jsatyam4 wrote:

If user doesn’t kill the app, instead he just pressed home button then app goes in background. And when user launch the app then data is not getting updated cause no api is being called.

What i can do if i want to update the data while launching the app from recent apps section. Where ngOnInit () and ionViewWillEnter () is not getting called. What else i can use to make it work.

I have tried using ionViewWillEnter (), ngOnInit ().

Posts: 1

Participants: 1

Read full topic

@artemorlov wrote:

Hello!

I am trying to download file with cordova-plugin-file-transfer on Android device and emulator:

public async downloadFile(task: DownloadTaskModel) {
    let path = null;

    if (this.platform.is('ios')) {
      path = this.file.documentsDirectory;
    } else {
      path = this.file.dataDirectory;
      console.log('downloadFile():', path);
    }

    const fileTransfer = this.transfer.create();
    fileTransfer.download(
      task.download_url,
      path + task.publish_file,
      true, {
        headers: {
          'Connection': 'close'
        }
    })
    .then(entry => {
      console.log('downloadFile(): File downloaded: ', entry);
    })
    .catch(error => {
      console.error('downloadFile(): Dowload failed:', error);
    });
  }

But nothing is happenning. fileTransfer.download(…) got response from server but downloading does not start:

Should fullPath be “/BigBuckBunny_320x180.mp4” or something longer? Please, tell me what is wrong in response data?

“cordova-plugin-file”: “6.0.1”,
“cordova-plugin-file-transfer”: “1.7.1”,

Ionic:

Ionic CLI : 5.2.0 (/home/artem/.nvm/versions/node/v10.14.1/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.5.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Capacitor:

Capacitor CLI : not installed
@capacitor/core : not installed

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0, browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 13 other plugins)

Utility:

cordova-res : 0.3.0 (update available: 0.5.1)
native-run : 0.2.2 (update available: 0.2.7)

System:

Android SDK Tools : 26.1.1 (/home/artem/SDK/Android)
NodeJS : v10.14.1 (/home/artem/.nvm/versions/node/v10.14.1/bin/node)
npm : 6.9.2
OS : Linux 4.9

Posts: 1

Participants: 1

Read full topic

@ButtonMash wrote:

I have a service that tracks network connection state and provides it to components across the application. Then, there’s a popup that has a list view that is supposed to update it’s items async based on new statuses received from network status service, which it does when app is served to chrome or prod built and run on chrome, but it doesn’t when run on android device. Second issue comes when network status triggers setting Login page to root of the main navigation controller. After this change detection starts working only on direct interaction with UI and tabs controllers don’t switch tabs until another page gets focused or app pause/resume.

Any ideas of what may cause this?

package.json

  "dependencies": {
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/camera": "5.8.0",
    "@ionic-native/core": "5.8.0",
    "@ionic-native/document-viewer": "5.8.0",
    "@ionic-native/file": "5.8.0",
    "@ionic-native/in-app-browser": "5.8.0",
    "@ionic-native/network": "5.8.0",
    "@ionic-native/photo-viewer": "5.8.0",
    "@ionic-native/screen-orientation": "5.8.0",
    "@ionic-native/splash-screen": "5.8.0",
    "@ionic-native/status-bar": "5.8.0",
    "@ionic/storage": "^2.2.0",
    "@types/pouchdb": "^6.3.3",
    "@types/pouchdb-upsert": "^2.2.6",
    "angular-svg-round-progressbar": "2.0.0",
    "angular2-signaturepad": "^2.8.0",
    "com-sarriaroman-photoviewer": "^1.2.2",
    "cordova-android": "^7.1.1",
    "cordova-android-support-gradle-release": "^1.4.7",
    "cordova-browser": "^5.0.4",
    "cordova-ios": "~4.5.5",
    "cordova-plugin-advanced-http": "^2.1.1",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-document-viewer": "^0.9.11",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-inappbrowser": "3.0.0",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-sqlite-2": "^1.0.6",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.6.0",
    "es6-promise-plugin": "^4.2.2",
    "ion-datepicker": "2.8.0",
    "ionic-angular": "3.9.6",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionic2-rating": "1.2.2",
    "ionicons": "^3.0.0",
    "ng2-validation": "^4.2.0",
    "npm": "^4.6.1",
    "pouchdb": "^7.0.0",
    "pouchdb-adapter-cordova-sqlite": "^2.0.5",
    "pouchdb-upsert": "^2.2.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "^3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "cordova-plugin-advanced-http": "~2.0.9",
    "ionic": "^4.12.0",
    "typescript": "2.8.1"
  },
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-screen-orientation": {},
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-document-viewer": {},
      "cordova-android-support-gradle-release": {
        "ANDROID_SUPPORT_VERSION": "27.+"
      },
      "cordova-plugin-file": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-sqlite-2": {},
      "cordova-plugin-advanced-http": {
        "OKHTTP_VERSION": "3.10.0"
      }
    },
    "platforms": [
      "browser",
      "android",
      "ios"
    ]
  }

Environment.service.ts AKA network status provider

@Injectable()
export class EnvironmentService {

  public isOnline: boolean;
  public isOnline$: BehaviorSubject<boolean>;

  private onlineDelay = 5000;

  constructor(private network: Network, private platform: Platform, private apRef: ApplicationRef, private ngZone: NgZone) {

    this.isOnline = navigator.onLine;
    this.isOnline$ = new BehaviorSubject<boolean>(navigator.onLine);

    let onlineSource$: Observable<boolean>;
    let offlineSource$: Observable<boolean>;

    if (this.platform.is('mobileweb')) {
      onlineSource$ = fromEvent(window, 'online').mapTo(true).delay(this.onlineDelay);
      offlineSource$ = fromEvent(window, 'offline').mapTo(false);
    }
    else {
      onlineSource$ = this.network.onConnect().mapTo(true).delay(this.onlineDelay);
      offlineSource$ = this.network.onDisconnect().mapTo(false);
    }

    let networkStatus$ = onlineSource$.merge(offlineSource$);

    this.ngZone.run(() => {

      networkStatus$.subscribe(status => {
        this.isOnline = status;

        this.apRef.tick();

        this.isOnline$.next(status);
      });

    })
}

app.component.ts

snippet responsible for navigation based on network status

    this.environment.isOnline$
      .pipe(
        skip(1),
        filter(isOnline => isOnline),
        flatMap(() => this.auth.isAuthenticated()),
      ).subscribe(isAuthenticated => {

        if (isAuthenticated) {
          this.processStashedActions();
        }
        else {
          this.nav.setRoot(LoginPage);
        }
      });

Posts: 1

Participants: 1

Read full topic