使用Ionic2和Angular2的类型'Navigator'上不存在属性'connection'

Question

I want to check my network using Ionic 2 and Angular 2. I receive a strange error that I cannot understand.

My app.ts is:

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = HomePage;

  static get parameters() {
    return [[Platform]];
  }


  constructor(platform: any) {
    this.rootPage = HomePage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }

}

My home.ts:

 import {App, Platform} from 'ionic-angular';
    import {StatusBar} from 'ionic-native';
    import {Network, Connection} from 'ionic-native';
    import {Page} from 'ionic-angular';



    @Page({
      templateUrl: 'build/pages/home/home.html',
    })

    export class HomePage {
      rootPage: any = HomePage;

      navigator = navigator;

      constructor(public platform: Platform) {
        this.platform = platform;
      }


      checkNetwork() {

        this.platform.ready().then(() => {
          // Problem1
          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('Connection type: ' + states[networkState]);

        });

      }

    }

My home.html

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <button (click)="checkNetwork()">Check Network</button>
</ion-content>

I receive one error and I totally not understand the reason:

1 - Property 'connection' does not exist on type 'Navigator'

Update:

I went to Ionic 2 site and currently my home.ts file look like this:

import {Platform, Page} from 'ionic-angular';
import {Connection} from 'ionic-native';
import {Network} from 'ionic-native';

@Page({
  templateUrl: 'build/pages/home/home.html',
})

export class HomePage {
  rootPage: any = HomePage;

  constructor(public platform: Platform) {
    this.platform = platform;
  }


  checkConnection() {
    console.log("entrou");

    console.log(Network);

    // watch network for a disconnect
    let disconnectSubscription = Network.onDisconnect().subscribe(() => {
      console.log('network was disconnected :-( ')
    });

    // stop disconnect watch
    disconnectSubscription.unsubscribe();



    // watch network for a connection
    console.log("watch network");
    console.log("Conexao" + Network.connection);
    let connectSubscription = Network.onConnect().subscribe(() => {
      console.log('network connected!');
      // We just got a connection but we need to wait briefly
      // before we determine the connection type.  Might need to wait?
      // prior to doing any api requests as well.
      setTimeout(() => {
        console.log(Network.connection);
        if (Network.connection === Connection.WIFI) {
          console.log('we got a wifi connection, woohoo!');
        }
      }, 3000);
    });

    console.log("Sub" + connectSubscription);
    // stop connect watch
    connectSubscription.unsubscribe();
  }
}

I get a console message saying:

Native: tried accessing the Network plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

Answer 1

It seems like the Connection Plugin is not installed properly...

cordova plugin add cordova-plugin-network-information

also what is this line doing?

navigator = navigator;

Answer 2

Add TypeScript definition using npm npm install @types/cordova-plugin-network-information --save . If it doesn't work, pls try using Network.type instead of navigator.connection.type