Ionic 2 Cordova network information plugin reference error

Question

I've installed the network information plugin as per this tutorial into my Ionic 2 app:

Ionic 2 | How to Work With Cordova Plugins

However TypeScript won't compile because it can't find the reference for "Connection" in the states array lines. Any idea how to write the import statement for it as per Platform, Page etc?

My class:

import {NavController, NavParams} from 'ionic-framework/ionic';
import {Page, ViewController, Platform, Alert, Modal, Events} from 'ionic-framework/ionic';
import {forwardRef} from 'angular2/core';
import {OnInit} from 'angular2/core';
import {Injectable} from 'angular2/core';
import {TodosService} from '../../services/TodosService';
import {MyTodosItem} from '../../pages/my-todos-item/my-todos-item';

@Page({
  templateUrl: 'build/pages/my-todos/my-todos.html'
})
class TodayPage {

  constructor(
    private platform: Platform,
    private nav: NavController,
    private _events: Events,
    private _todosService: TodosService) {
    this._platform = platform;
    this._isAndroid = platform.is('android');
  }

  ngOnInit() {
    this.getItems();
    this._events.subscribe('item:updated', () => {
      this.getItems();
    });

    this.checkNetwork();
  }

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

          var states = {};
          states[Connection.UNKNOWN]  = 'Unknown connection';
          states[Connection.ETHERNET] = 'Ethernet connection';
          states[Connection.WIFI]     = 'WiFi connection';
          states[Connection.CELL_2G]  = 'Cell 2G connection';
          states[Connection.CELL_3G]  = 'Cell 3G connection';
          states[Connection.CELL_4G]  = 'Cell 4G connection';
          states[Connection.CELL]     = 'Cell generic connection';
          states[Connection.NONE]     = 'No network connection';

          alert(states[networkState]);
      });
  }
.. 
}

Error is:
Cannot find name 'Connection'.

Answer 1

NOTE:Plugins do not necessarily/always work in the browser, therefore use a real device or emulator.

To fix TypeScript errors:

1. Create a folder called Typings in /app
2. Download this file into that folder: phonegaptypings here

3. Create another file in the folder e.g. ngcordova.d.ts with this code:

   interface Window { plugins: any; }

Then modify your tsconfig.json files property:

  "files": [
    "app/app.ts",
    "app/typings/ngcordova.d.ts",
    "app/typings/phonegap.d.ts"
  ]

Now, TypeScript shouldn't complain, it'll build but importantly: test on a REAL device or emulator, NOT the browser.

This worked for me.

Answer 2

You should add the followings under the import lines

declare var navigator: any; declare var Connection: any;