Wifiwizard is added to my config and package.json file but I can't find the import in my module.ts file

[nathancriel]

Prerequisites

Check all boxes if you have done the following:

• Checked that your issue isn't already filed: https://github.com/tripflex/wifiwizard2/issues
• Make sure you fill out the Issue Type below

Issue type

Select all that apply

• Bug
• Enhancement
• Task
• Question
• Other

Description

I'm using ionic framework. When I want to install the wifiwizard2 plugin I get no errors but i'm not able to use the plugin. The wifiwizard is added to my config and package.json file but I can't find the import in my module.ts file. Thanks in advance.

Steps to Reproduce

1. run sudo cordova plugin add https://github.com/tripflex/wifiwizard2

2. run sudo npm i cordova-plugin-wifiwizard2 or sudo ionic cordova plugin add cordova-plugin-wifiwizard2

3. [and so on...]

Expected behavior: Use the plugin

Actual behavior: cannot find import

Reproduces how often: 100%

Versions

Ionic:

ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.1.1
@angular-devkit/build-angular : 0.13.6
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.6
@ionic/angular-toolkit : 1.4.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

Android SDK Tools : 26.1.1 (/Users/nathancriel/Library/Android/sdk)
NodeJS : v10.15.1 (/usr/local/bin/node)
npm : 6.7.0
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

Additional Information

config.xml
<plugin name="wifiwizard2" spec="git+https://github.com/tripflex/wifiwizard2.git" /

package.json

dependencies
"cordova-plugin-wifiwizard2": "git+https://github.com/tripflex/wifiwizard2.git",

[saoron]

This plugin does not have @ionic/native typings (yet), in order to use it add this to just below your import list on your service:

declare var WifiWizard2: any;

and then use the WifiWizard2 to invoke the function.

[nathancriel]

I get: WifiWizard2 is not defined.

[nathancriel]

i started a blank project and is still not working:
this is my tab1.page.ts:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

declare var wifiwizard2: any;

@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})

export class Tab1Page {
constructor (
private plt: Platform,

) {
this.plt.ready().then(() => {
this.getSSID();
});
}

getSSID() {
console.log(wifiwizard2.getConnectedSSID());
}
}


commands:
cordova plugin cordova-plugin-wifiwizard2
npm i cordova-plugin-wifiwizard2

• wifiwizard is in my list of cordova plugins
• wifiwizard is in my config.xml file
• wifiwizard is in package.json

[saoron]

Try to use WifiWizard2 with capital W [Exactly as mentioned in my post]

[nathancriel]

Still the same reference error. I tried all combinations.

[saoron]

Try this :
declare var window: any;

window.WifiWizard2

If that's doesn't work paste your code here.

[nathancriel]

`import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

// declare var WifiWizard2: any;
declare var window: any;

@component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})

export class Tab1Page {
constructor(
private plt: Platform) {
this.plt.ready().then(() => {

  window.WifiWizard2.getConnectedSSID();
});

}
}
`
still error: Cannot read property 'getConnectedSSID' of undefined

[saoron]

Are you sure the plugin is installed?
Show me your log for:
console.log(window)

[nathancriel]

when i run: sudo cordova plugin ls
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 3.1.2 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
es6-promise-plugin 4.1.0 "Promise"
wifiwizard2 3.1.0 "WifiWizard2"

[angelofan]

@Crielz
Now I write my code here, I hope I can help you.

//Introducing wifi management dependencies
declare var WifiWizard2: any;

doGetWifiSsid(){
  WifiWizard2.getConnectedSSID().then((ssid) => {
    console.log("Get ssid success: " + ssid);
  }).catch((err) => {
    console.log("Failed to get ssid, please check the error↓");
    console.error(err);
  });
}

Very happy to help anyone, good luck!

[nathancriel]

Still not able to fetch methods of the wifiwizard plugin. Anyone that would like to share a blank project with the working plugin?

[angelofan]

@Crielz
I have successfully run into my project, this plugin must be tested with real devices. Wait a moment, I will create a Demo project and push it to my repository. You can clone and run directly to see if it can succeed. I will reply you later, about an hour. I am going to work for this now.

[nathancriel]

I think something went wrong when you pushed your project. Only .gitignore and License files.

[saoron]

@Crielz are you testing this on a real device or in the browser??

[angelofan]

https://github.com/13546777510/WifiWizard2-Demo.git

It works perfectly

[angelofan]

home.ts

import { Component } from '@angular/core';

//Introducing wifi management dependencies
declare var WifiWizard2: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public wifiSsid = 'Loading...';

  doGetWifiSsid(){
    WifiWizard2.getConnectedSSID().then((ssid) => {
      console.log("Get ssid success: " + ssid);
      this.wifiSsid = ssid;
    }).catch((err) => {
      console.log("Failed to get ssid, please check the error↓");
      console.error(err);
    });
  }

}

home.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      WifiWizard2-Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <p>This is to test the operation of the WifiWizard2 plugin.</p>
    <ion-input [(ngModel)]="wifiSsid" disabled></ion-input>
    <ion-button expand="full" (click)="doGetWifiSsid()">Get Wifi Ssid</ion-button>
  </div>
</ion-content>

In addition, you need to pay attention to:

1. Android 8.0 or higher needs to enable location authorization to obtain WiFi information, otherwise it returns <unknown ssid>, because we can judge the user's location from wifi information.
2. this plugin can only be used on real devices, such as Android or iOS, the browser can not use this plugin

The method I am working on:

1. create an ionic project
2. ionic cordova plugin add https://github.com/tripflex/WifiWizard2.git
3. write the code, you can refer to the Demo
4. Create an Android project:
   ionic cordova prepare android
   Enter y when prompted to install
5. open with Android studio
   test/platforms/android
6. Compile your project and run it on your Android device.

good luck

[nathancriel]

When i run your project on an android device it works! thanks a lot for that.
But when i call the method in my browser i get the same reference error. Wifiwizard2 is not defined. Is this normal?

[angelofan]

@Crielz
I am very happy to help you.
This is normal, because this plugin can't be run in the browser. To use this function, you must run it on the device, such as Android or iOS.

[nathancriel]

Thanks a lot! @13546777510 and @saoron

[ramanraja]

The link
https://github.com/13546777510/WifiWizard2-Demo.git
appears to be stale. Can you please refresh it? Thanks.

[robsoncxs]

The link
https://github.com/13546777510/WifiWizard2-Demo.git
appears to be stale. Can you please refresh it? Thanks.

Does anyone have this example?

[ramanraja]

Is this the one you are looking for?
https://github.com/tripflex/WifiWizard2