Ionic v4/ Ionic Native v5 @ionic-native/network, event functions failing

#1

Hello,

So I am in the process of migrating to ionic v4. One of the native modules I am using is @ionic-native/network (https://beta.ionicframework.com/docs/native/network).

I cannot get the onConnect, onDisconnect and onchange functions to work.

The code looks like this and is located in a constructor of a service:

import { Network } from '@ionic-native/network/ngx';

  constructor(
    private network: Network) {

    console.log(this.network.type)
    this.subscriptionDisconnectNetwork = this.network.onDisconnect().subscribe(() => {
      console.log('network was disconnected :-(');
    }, (error) => {
      console.log("subscriptionDisconnectNetwork error")
      console.warn(error);

    });

    this.subscriptionChangeNetwork = this.network.onchange().subscribe(() => {
      console.log('network changed :)');
    }, (error) => {
      console.log("subscriptionChangeNetwork error")
      console.warn(error);

    });

    this.subscriptionConnectNetwork = this.network.onConnect().subscribe(() => {
      console.log('network was connected :)');
    }, (error) => {
      console.log("subscriptionConnectNetwork error")
      console.warn(error);

    });
}

ANDROID behaviour:

All subscriptions fail when the constructor runs and do not seem to monitor network changes afterwards.
In addition the following errors can be seen whilst running the respective build on an Android phone ():

**ERROR : **

wifi
main.js:1573 subscriptionDisconnectNetwork error
main.js:1574 RangeError: Maximum call stack size exceeded
    at setupSubscription (vendor.js:1)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
(anonymous) @ main.js:1574
main.js:1580 subscriptionChangeNetwork error
main.js:1581 RangeError: Maximum call stack size exceeded
    at isEventTarget (vendor.js:83458)
    at setupSubscription (vendor.js:83427)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
(anonymous) @ main.js:1581
main.js:1587 subscriptionConnectNetwork error
main.js:1588 RangeError: Maximum call stack size exceeded
    at setupSubscription (vendor.js:1)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)
    at setupSubscription (vendor.js:83444)

iOs behaviour
Even though the iOs build is successful, when the application loads on the phone, after the splash screen the app never loads.

package.json:


    "@ionic-native/core": "5.0.0-beta.15",
    "@ionic-native/network": "^5.0.0-beta.20",
    "@ionic/angular": "4.0.0-beta.7",
    "cordova-android": "7.0.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-network-information": "^2.0.1",

Is there a reason for this behaviour? Am I initialising something incorrectly?

#2

have you try without mixing versions?

#3

Yes it was initially on the same version yesterday, then I updated it to the latest version I could find in npm, just in case that would resolve the issue.

#4

v5.0.0-beta.17 maybe?

Above I think are pre-release

Otherwise I have no other ideas, sorry

#5

Unfortunately that does not work, but thanks for the recommendation.

I am using multiple other native frameworks in conjunction (tcp, firebase, wifi libraries). Maybe d the combination of them is creating some sort of issue… I’ll try to remove those and check if I that module works on its own.

2 Likes
#6

I am still getting the error with a very basic app. The cordova plugin list looks like this:

cordova-plugin-device 2.0.2 “Device”
cordova-plugin-ionic-keyboard 2.1.2 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 2.1.4 “cordova-plugin-ionic-webview”
cordova-plugin-network-information 2.0.1 “Network Information”
cordova-plugin-splashscreen 5.0.2 “Splashscreen”
cordova-plugin-statusbar 2.4.2 “StatusBar”
cordova-plugin-whitelist 1.3.3 “Whitelist”
cordova-sqlite-storage 2.4.0 “Cordova sqlite storage plugin”

#7

could you parse your ionic info?

then if you could reproduce the problem with a very basic app, could you upload it to Github so I could clone it and try it?

#8

Sure. Here is a basic ionic app with only the network plugin added to it. Let me know if you have any problem accessing it. Thank you again for your help!

#9

Unfortunately I could not ionic serve this demo project, when I do so I get following error:

[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 325 kB [initial] [rendered]

[ng] ERROR in src/app/app.component.ts(6,28): error TS2307: Cannot find module ‘./app.service’.

[ng] src/app/app.module.ts(12,28): error TS2307: Cannot find module ‘./app.service’.

[ng] :information_source: 「wdm」: Failed to compile.

#10

Truly sorry, not through the first coffee yet. If you pull and try again it should be ok.

#11

I face the same problem

According https://github.com/ionic-team/ionic-native/issues/2674 downgrading native is the workaround

#12

Thanks @reedrichards that solves the issue. Much appreciated.

#13

Cool _____________________ :+1:

#14

Hi @alexasilock

I am facing the same problem.
Have other native plugins …
Did you solve by
Use NPM to remove the module, then re-import them with a version label?

#15

Hey GoTop,

So in the package.json you will need to set the version of the particular library to this:

 "@ionic-native/network": "5.0.0-beta.14",

Once you set that you need to run npm. I think this should work:

npm update --save

If it doesn’t delete the node_modules folder and do:

npm install
#16

Thanks @alexasilock !

It gave this
npm WARN @ionic-native/network@5.0.0-beta.14 requires a peer of @ionic-native/core@5.0.0-beta.14 but none is installed. You must install peer dependencies yourself.

Do I have to change also :

"@ionic-native/core": "^5.2.0",
"@ionic-native/splash-screen": "^5.2.0",
"@ionic-native/status-bar": "^5.2.0",

to the same version of?
@ionic-native/network”: “5.0.0-beta.14”,

#17

I’m on 5.0.0-beta.15 on the rest of the ionic-native libraries. You could potentially go higher, I am not sure at which point the dependencies will start throwing warnings.

    "@ionic-native/core": "5.0.0-beta.15",
    "@ionic-native/splash-screen": "5.0.0-beta.15",
    "@ionic-native/status-bar": "5.0.0-beta.15",
#18

Thanks!!! It’s working …

Still gives that peer warning but the problem
was that I was importing…
import { Network } from ‘@ionic-native/network/’;
instead of
import { Network } from ‘@ionic-native/network/ngx’;

dummy. me :slight_smile:

2 Likes
#19

Downgrade @ionic-native/network doesn’t work for me.
Error is :

Error: StaticInjectorError(AppModule)[AppComponent -> Network]: 
  StaticInjectorError(Platform: core)[AppComponent -> Network]: 
    NullInjectorError: No provider for Network!

Any help ?

#20

Have you added network as a provider in your app.module.ts ?