Error while trying to fetch network/connection information

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

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;
  }
}

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

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

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!')
  });
  }

}
}

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

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