0

i've got an error here. Also i want in this code to scan for online and offline through full app, not only on startup... How to do it ? app.component.ts file :

constructor(platform: Platform, statusBar: StatusBar, modalCtrl: ModalController, private network: Network, private toast: ToastController) {
platform.ready().then(() => {

  this.network.onDisconnect().subscribe(() => {
    this.connOff();
  }
  );

  this.network.onConnect().subscribe(() => {
    this.connEst();
  }
  )

})

}


    connEst() {
        let toast = this.toast.create({
          message: 'Connection Established.',
          duration: 3000
        });
        toast.present();
      }
      connOff() {
        let toast = this.toast.create({
          message: 'Network OFFLINE.',
          duration: 3000
        });
        toast.present();
      }
    }
  • 1
    Possible duplicate of [How to detect online/offline event cross-browser?](https://stackoverflow.com/questions/3181080/how-to-detect-online-offline-event-cross-browser) – Madhawa Priyashantha Mar 01 '19 at 08:11
  • Possible duplicate of [Can someone explain to me why I don't see connection status in this code?](https://stackoverflow.com/questions/54900685/can-someone-explain-to-me-why-i-dont-see-connection-status-in-this-code) – Jacopo Sciampi Mar 01 '19 at 08:11
  • @MadhawaPriyashantha this is not JS script, its typescript and ionic app. –  Mar 01 '19 at 08:15
  • @Zeljk0 same thing – Madhawa Priyashantha Mar 01 '19 at 08:17
  • @MadhawaPriyashantha can u explain to me how to do that in this kind of code through typescript ? –  Mar 01 '19 at 08:29
  • @Zeljk0 go throw the answers find a better one.test it just with js and make sure it's working.then create a angular service and implement it as you want.it's easy to turn js code to typescript – Madhawa Priyashantha Mar 01 '19 at 08:33

2 Answers2

0

This is my network service, may be you can use it to compare with yours

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Network } from '@ionic-native/network';
import { Subject } from 'rxjs/Subject';
import { NotificationService } from './notification-service';

@Injectable()
export class NetworkService {

  info: any = {
    connected: true,
    type: "none"
  };

  disconnectSubscription: any;
  connectSubscription: any;

  private infoConnection = new Subject<any>();
  infoConnection$ = this.infoConnection.asObservable();

  constructor(
    private network: Network,
    private platform: Platform,
    private notificationService: NotificationService,
  ) {
    this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      this.sendStatus();
    });

    this.connectSubscription = this.network.onConnect().subscribe(() => {
      this.sendStatus();
    });
  }

  sendStatus() {
    if (this.platform.is("cordova")) {
      setTimeout(() => {
        this.info = {
          connected : this.isConnected(),
          type: this.getConnectionType()
        }
        this.infoConnection.next(this.info);
      }, 3000);
    }
  }

  isConnected() {
    if (this.platform.is("cordova")) {
      let hasConnection = this.network.type == "none" || this.network.type == 'unknown' ? false : true;
      return hasConnection;
    } else {
      return true;
    }
  }

  getConnectionType() {
    if (this.platform.is("cordova")) {
      return this.network.type;
    } else {
      return true
    }
  }

}

sivy
  • 361
  • 2
  • 7
  • is this in app.component.ts or you made a provider and how did you call this service on any page ? –  Mar 01 '19 at 10:27
  • this is a provider, it's the best practice. You can access to isConnected method in any component – sivy Mar 01 '19 at 10:30
  • so what do you get when no internet ? No any toast controller or alert as i can see ? you call it like: this.NetworkService.isConnected(); ? –  Mar 01 '19 at 10:33
  • yes, and i get `false` if no internet. but i recommend you to use the observable `infoConnection$` and subscribe on it to be notified if there is connection or not. – sivy Mar 01 '19 at 10:39
  • could you please write to me how to do it with code ? Thanks for all. –  Mar 01 '19 at 10:43
0

app.module.ts

add the service in your providers

@NgModule({
...
providers: [NetworkService],
...
})

app.component.ts

infoConnection$ = this.networkService.infoConnection$;

constructor(private networkService: NetworkService) {
  this.networkService.infoConnection$.subscribe(infoConnection => {
    console.log(infoConnection)
  })
}

network.service.ts

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Network } from '@ionic-native/network';
import { Subject } from 'rxjs/Subject';
import { NotificationService } from './notification-service';

@Injectable()
export class NetworkService {

  info: any = {
    connected: true,
    type: "none"
  };

  disconnectSubscription: any;
  connectSubscription: any;

  private infoConnection = new Subject<any>();
  infoConnection$ = this.infoConnection.asObservable();

  constructor(
    private network: Network,
    private platform: Platform,
    private notificationService: NotificationService,
  ) {
    this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      this.sendStatus();
    });

    this.connectSubscription = this.network.onConnect().subscribe(() => {
      this.sendStatus();
    });
  }

  sendStatus() {
    if (this.platform.is("cordova")) {
      setTimeout(() => {
        this.info = {
          connected : this.isConnected(),
          type: this.getConnectionType()
        }
        this.infoConnection.next(this.info);
      }, 3000);
    }
  }

  isConnected() {
    if (this.platform.is("cordova")) {
      let hasConnection = this.network.type == "none" || this.network.type == 'unknown' ? false : true;
      return hasConnection;
    } else {
      return true;
    }
  }

  getConnectionType() {
    if (this.platform.is("cordova")) {
      return this.network.type;
    } else {
      return true
    }
  }

And try to connect and disconnect you phone to test

sivy
  • 361
  • 2
  • 7