Native Spinner Dialog

Ionic Native
1

I’ve already used the native spinner in some older projects before and it’s worked fine. However, I recently started a new IONIC’s project (V.3.5.3) and It’s not working properly or I’m doing something wrong. I also noticed that Ionic’s Team has changed its Native Spinner Plugin recently, but I don’t think that’s the problem.

Every time I call show funcion:
this.spinnerDialog.show()

It returns:

WARN: Native: tried calling SpinnerDialog.show, but the SpinnerDialog plugin is not installed.
WARN: Install the SpinnerDialog plugin: 'ionic plugin add cordova-plugin-native-spinner

And yes, the plugin is already included in app.module.ts in providers part.

And yes, the commands to include the plugin were executed:

ionic cordova plugin add cordova-plugin-native-spinner
npm install --save @ionic-native/spinner-dialog

Could anyone help me please?

2

There’s a chance your old Ionic install is competing with your new one, unless you’re on a completely separate disk/machine. The first thing I would do is: delete (by hand) your node_modules folder, type npm cache clean --force in the command line, and the reinstall Ionic and Cordova.

The problem might persist, but if it does you’ll know for sure it’s a problem that will affect other people, not just your system.

If it still persists after you reinstall, I’d suggest you post your ionic info and package.json.

3

Same issue here. I installed the Native Spinner Dialog for the first time and also receive the following warnings of vendor.js:1 in the console and no spinner is shown:

Native: tried calling SpinnerDialog.show, but the SpinnerDialog plugin is not installed.
Install the SpinnerDialog plugin: 'ionic cordova plugin add cordova-plugin-native-spinner'

My Ionic Info:

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 2.0.2
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.5.3

System:

    Node       : v8.2.1
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.3.0

My package.json:

{
    "name": "-appname-",
    "author": "-author-",
    "homepage": "-homepage-",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/animations": "4.1.3",
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@angular/platform-server": "4.1.3",
        "@angular/router": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/facebook": "^4.1.0",
        "@ionic-native/geolocation": "3.12.1",
        "@ionic-native/google-maps": "3.14.0",
        "@ionic-native/google-plus": "^4.1.0",
        "@ionic-native/spinner-dialog": "^4.1.0",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic-native/vibration": "^4.0.0",
        "@ionic/app-scripts": "2.0.2",
        "@ionic/storage": "2.0.1",
        "@types/google-maps": "^3.2.0",
        "@types/googlemaps": "^3.26.14",
        "angularfire2": "^4.0.0-rc.1",
        "angularfire2-offline": "^4.1.7",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "~1.0.6",
        "cordova-plugin-crosswalk-webview": "^2.3.0",
        "cordova-plugin-device": "~1.1.5",
        "cordova-plugin-facebook4": "^1.9.1",
        "cordova-plugin-fcm": "~2.1.2",
        "cordova-plugin-geolocation": "~2.4.2",
        "cordova-plugin-googlemaps": "^1.4.3",
        "cordova-plugin-googleplus": "^5.1.1",
        "cordova-plugin-native-spinner": "^1.1.3",
        "cordova-plugin-splashscreen": "~4.0.2",
        "cordova-plugin-statusbar": "~2.2.2",
        "cordova-plugin-vibration": "~2.1.5",
        "cordova-plugin-whitelist": "~1.3.2",
        "firebase": "^4.1.2",
        "ionic-angular": "^3.5.3",
        "ionic-plugin-keyboard": "~2.2.1",
        "ionic2-super-tabs": "^4.0.0",
        "ionicons": "3.0.0",
        "promise-polyfill": "6.0.2",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "typescript": "2.3.4",
        "webpack": "2.4.1",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@angular/cli": "^1.0.3",
        "@ionic/app-scripts": "^2.1.0",
        "@ionic/cli-plugin-cordova": "1.4.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.2",
        "typescript": "2.3.4"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [],
    "description": "-description-",
    "cordova": {
        "platforms": [
            "android"
        ],
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-fcm": {},
            "cordova-plugin-geolocation": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-vibration": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-crosswalk-webview": {
                "XWALK_VERSION": "23+",
                "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
                "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
                "XWALK_MODE": "embedded",
                "XWALK_MULTIPLEAPK": "true"
            },
            "cordova-plugin-googlemaps": {
                "API_KEY_FOR_ANDROID": "-API key-"
            },
            "cordova-plugin-facebook4": {
                "APP_ID": "-appID-",
                "APP_NAME": "-appName-"
            },
            "cordova-plugin-googleplus": {
                "REVERSED_CLIENT_ID": "id"
            },
            "cordova-plugin-native-spinner": {}
        }
    }
}
4

This is a bug in the native spinner wrapper. Solution here on github:

1 Like
5

I am still facing the issue. In my case, it is already SpinnerDialog.