Ionic 3 - network-information plugin - Object(...) is not a function(…)

Question

I need to implement network information plugin in an ionic 3 angular 4 project. I have installed a network plugin using

$ ionic cordova plugin add cordova-plugin-network-information  
$ npm install --save @ionic-native/[email protected]

After installation, I have used this plugin in app.component.ts but I'm getting an error as

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function(…) on either device or emulator.

I'm sharing native-core and plugin versions that I have used in this app.

"@ionic-native/core": "5.0.0"
"@ionic-native/network": "5.0.0"
"cordova-plugin-network-information": "2.0.1"

Please Note: I have tried upgrading "@ionic-native/core" to "5.2.0" and "@ionic-native/network" to "5.2.0". But the issue was not resolved.

Here, I cannot degrade plugin npm version or "@ionic-native/core" to "4.2.0" as I have many plugins used in this app which are working fine @ version "5.0.0".

Below is my app.component.ts

import { Network } from '@ionic-native/network/ngx';
...
constructor(private network: Network) {
    this.platform.ready().then(() => {
        // watch network for a disconnection
        let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
            console.log('network disconnected!');
        });
    })
}

Below is my package.json

"dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    ...
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/network": "^5.0.0",
    ...
    "cordova-android": "7.1.4",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-network-information": "2.0.1",
    "ionic-angular": "^3.9.2",
  }

Below is my development system information

Ionic:
    ionic (Ionic CLI)  : 4.3.1 (/usr/local/lib/node_modules/ionic)
    Ionic Framework    : ionic-angular 3.9.2
    @ionic/app-scripts : 3.2.1

Cordova:
   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : no whitelisted plugins

System:
   Android SDK Tools : 26.1.1 (/Users/###/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v8.11.3 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

Has anyone encountered this issue? Please help me as I'm not able to move forward without the network plugin. Thanks for your time.

Answer 1

The problem is that you are using the /ngx import which is for Ionic version 4. If you go read the changelog you will see that version 5 and up Requires Angular 7.1 and TypeScript 3.1.

Try to downgrade plugin to 4.20.0 like this :

npm uninstall @ionic-native/network

then npm install @ionic-native/[email protected]

And remove ngx in import like this : import { Network } from '@ionic-native/network';