Ionic 3 - how use cordova plugin Network interface with ionic?

Question

My problem: I need my app to search the local WiFi network to find a server computer with a application on a specific port. I don't want to hard code the server IP address into the app as it could be possibly used in many locations.

Update: So I need to be able to find the IP address of all devices on the network.

What iv done so far:

Iv followed other guides on stack overflow and online by doing the following steps:

1. install cordova plugin:

 "cordova plugin add cordova-plugin-networkinterface"

2. Declare the variable in global scope to access the object

declare var NetworkInterface: any;
export class TestClass{}

3. Call the object using the global variable inside a component

NetworkInterface.getWiFiIPAddress((ip) => {
   console.log("network ip address = " + ip);
});

However this causes an error on run time when running from the mobile:

ERROR Error: Uncaught (in promise): ReferenceError: NetworkInterface is not defined

I've also tried declaring a variable globally and then trying to apply a string value in a component, only to get the same problem. It appears to be more of a problem with the variable not working globally? Any help would be great!

Answer 1

You need to use below CLI:

ionic plugin add cordova-plugin-networkinterface --save 

You need to declare it as global.And also you need to test this on either device or emulator since this is a plugin.

 declare var NetworkInterface: any;

Old Answer:

You can easily do it using native Network plugin.

ionic cordova plugin add cordova-plugin-network-information
npm install --save @ionic-native/network

From the doc:

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

constructor(private network: Network) { }

...

// watch network for a connection
let connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('network connected!');
  // We just got a connection but we need to wait briefly
   // before we determine the connection type. Might need to wait.
  // prior to doing any api requests as well.
  setTimeout(() => {
    if (this.network.type === 'wifi') {
      console.log('we got a wifi connection, woohoo!');
    }
  }, 3000);
});

Answer 2

Solved the issue by accessing the window object directly and then the networkinterface object.

Code Solution:

 (<any>window).networkinterface.getWiFiIPAddress((ip) => {
     console.log("network ip address = " + ip);
 });

This means I no longer have to use a global variable for reference. Hopefully this will help someone else.

Update thanks to Sampath for another solution; It appears I should of used:

ionic cordova plugin add cordova-plugin-networkinterface --save

Instead of:

cordova plugin add cordova-plugin-networkinterface

Answer 3

If you want to access the Network plugin you just need to add it to your app.module.ts providers collection. This registers it as a singleton.

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Network
  ]
})
export class AppModule { }

Then you can simply import and and use it on a page as per the plugin docs.