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

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.

Answer 2

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.