Error while trying to fetch network/connection information

Ionic Framework ionic-v3
#1

Hey guys,

I’m currently trying to fetch information about the network state and the connection type, but I always get an error.

I tried this:

  checkConnection() {
    platform.ready().then(() => {
      var networkState = navigator.connection.type;
    });
  }

…and within the console (emulation mode) I got the following output. My Ionic2 application is based on type script.

TypeScript error: app/app.ts(101,5): Error TS2304: Cannot find name 'platform'.
TypeScript error: app/app.ts(102,36): Error TS2339: Property 'connection' does not exist on type 'Navigator'.

Thanks,
Oliver

#2

you have to import the Platform Class and inject it to your component:

import {Platform} from 'ionic-angular';

@Component({...})
export MyPage {
  constructor(platform: Platform) {
    this.platform = platform;
  }
}
#3

Ok. I changed this, but I still get an error:

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'type' of undefined
browser_adapter.js:77 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'type' of undefinedBrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:58(anonymous function) @ application_ref.js:317schedulerFn @ async.js:132SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:120onError @ ng_zone.js:117onHandleError @ ng_zone_impl.js:67ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494
browser_adapter.js:77 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:60(anonymous function) @ application_ref.js:317schedulerFn @ async.js:132SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:120onError @ ng_zone.js:117onHandleError @ ng_zone_impl.js:67ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494
browser_adapter.js:77 Error: Uncaught (in promise): TypeError: Cannot read property 'type' of undefined
    at resolvePromise (zone.js:538)
    at zone.js:574
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.js:37)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at drainMicroTaskQueue (zone.js:474)BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:61(anonymous function) @ application_ref.js:317schedulerFn @ async.js:132SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:120onError @ ng_zone.js:117onHandleError @ ng_zone_impl.js:67ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494
zone.js:461 Unhandled Promise rejection: Cannot read property 'type' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'type' of undefined(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494
zone.js:463 Error: Uncaught (in promise): TypeError: Cannot read property 'type' of undefined(…)

I’m not able to get this “type” information…

this.platform.ready().then(() => {
var networkState = navigator.connection.type;

I also installed all typings with the npm package “TSD”.

Any idea?

Thanks,
Oliver

#4

then i think you forgot to install the networkconnection plugin for your mobile device. there is no navigator.connection in the browser…

#5

Hi, here my class file which I am using in my ionic 2 project. It uses the Network Plugin or window event listener, depending on the env.

import { Injectable } from ‘@angular/core’;
import {Network, Connection} from ‘ionic-native’;
import {GlobalService} from ‘./global.service’;

@Injectable()
export class ConnectivityService {

static isOnline: boolean;

static init() {
if(GlobalService.device == ‘core’) {

  	window.addEventListener('online', function(e) {
  		this.isOnline = true;
  	}, false);

  	window.addEventListener('offline', function(e) {
  		this.isOnline = false;
  	}, false);

  } else {

  Network.onConnect().subscribe(() => {
  		this.isOnline = true;
    console.log('Network connected!'); 
  });

  	Network.onDisconnect().subscribe(() => {
  		this.isOnline = false;
    console.log('Network disconnected!')
  });
  }

}
}

#6

In the top branch, where you use addEventListener, this is probably not bound properly. tsd is also deprecated. Use typings instead.

#7

Have you solved this issue, what would be simplest way to check if there is internet connection at all?