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

alexasilock · September 18, 2018, 7:13pm

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?

reedrichards · September 19, 2018, 1:16pm

have you try without mixing versions?

alexasilock · September 19, 2018, 1:29pm

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.

reedrichards · September 19, 2018, 1:40pm

v5.0.0-beta.17 maybe?

Above I think are pre-release

Otherwise I have no other ideas, sorry

alexasilock · September 19, 2018, 2:14pm

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.

alexasilock · September 20, 2018, 3:51pm

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”

reedrichards · September 20, 2018, 5:04pm

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?

alexasilock · September 21, 2018, 8:16am

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!

reedrichards · September 21, 2018, 8:46am

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] ｢wdm｣: Failed to compile.

alexasilock · September 21, 2018, 8:51am

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

reedrichards · September 21, 2018, 10:04am

I face the same problem

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

alexasilock · September 21, 2018, 12:41pm

Thanks @reedrichards that solves the issue. Much appreciated.

reedrichards · September 21, 2018, 1:20pm

Cool _____________________

GoTop · February 21, 2019, 9:07pm

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?

alexasilock · February 22, 2019, 9:28am

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

GoTop · February 22, 2019, 1:18pm

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”,

alexasilock · February 22, 2019, 1:34pm

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",

GoTop · February 22, 2019, 4:48pm

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

jp11 · March 13, 2019, 10:22am

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 ?

alexasilock · March 13, 2019, 10:35am

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