Error TS2339: Property 'Connection' does not exist on type 'Navigator'

Question

very simple issue

I am trying ang 2 and ionic 2.

Used following code -

main file -

/// <reference path="../../../node_modules/@angular/platform-browser/src/browser.d.ts" />


import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
import {NavController} from 'ionic-angular';
import {Network} from 'ionic-native'

@Component({
  templateUrl: 'build/pages/items-map/items-map.html'
})
export class ItemsMap {

  constructor(private platform : Platform) {
    console.log(navigator.Connection);
  }

}

NOw whenever I build the project using gulp build, i get -

Error TS2339: Property 'Connection' does not exist on type 'Navigator'.

Any help on same? I know there are some more similar issues logged, but none of the are having any definitive answers

Answer 1

This is TypeScript Definition problem. It need TypeScript definition for the plugin. Use npm to install it.

npm install @types/cordova-plugin-network-information --save

If it doesn't work, try Network.type instead of navigator.connection.

Answer 2

If you change it to "navigator['connection']" that might solve the problem, or as someone suggested "navigator.type". But I see a lil issue in your code, you haven't declare the "navigator"! I suggest you do that above the the @Component decorator, add it as follows:

declare var navigator; 
@Component decorator({
           .....
})

and then change to "navigator.type" or to "navigator['connection'], whatever suits you!

Hope this helps.

Answer 3

It looks like you are already importing the Network class so you can get the connection type by calling Network.connection. The underlying code for this property will return navigator.connection.type.

Because this way you are accessing it through Ionic's TypeScript declaration class (network.d.ts) the error will no longer occur.

Note, when using the Network class be sure to add the Cordova plugin cordova-plugin-network-information to your config.xml file.

Example

import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
import {NavController} from 'ionic-angular';
import {Network} from 'ionic-native'

@Component({
  templateUrl: 'build/pages/items-map/items-map.html'
})
export class ItemsMap {

  constructor(private platform : Platform) {
    console.log(Network.connection);
  }
}

Answer 4

You can create your custom type definitions for Network Information API based on the W3C Spec Draft.

The Draft Community Group Report 11 May 2020 was used for the snippet below, with saveData attribute from the Draft Community Group Report 12 January 2022.

// network-information-api.d.ts
declare interface Navigator extends NavigatorNetworkInformation {}
declare interface WorkerNavigator extends NavigatorNetworkInformation {}
declare interface NavigatorNetworkInformation {
  readonly connection?: NetworkInformation
}
type Megabit = number
type Millisecond = number
type EffectiveConnectionType = '2g' | '3g' | '4g' | 'slow-2g'
type ConnectionType =
  | 'bluetooth'
  | 'cellular'
  | 'ethernet'
  | 'mixed'
  | 'none'
  | 'other'
  | 'unknown'
  | 'wifi'
  | 'wimax'
interface NetworkInformation extends EventTarget {
  readonly type?: ConnectionType
  readonly effectiveType?: EffectiveConnectionType
  readonly downlinkMax?: Megabit
  readonly downlink?: Megabit
  readonly rtt?: Millisecond
  readonly saveData?: boolean
  onchange?: EventListener
}

Native support for Network Information API in TypeScript was added in #44842 with limited attributes.