Ionic-native: Native Spinner: "SpinnerDialog plugin is not installed" - but it is!

[JaneDawson]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
After installing the _Native Spinner Dialog_ Plugin, I 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'

However, I installed the plugin properly.

The issue seems to beexperienced by other users as well: https://forum.ionicframework.com/t/native-spinner-dialog/99366

Expected behavior:
No warning & spinner shown.

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:

{
    [...]
    "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": {}
        }
    }
}

[fatihkizmaz]

See my pull request for this bug, https://github.com/ionic-team/ionic-native/pull/1859

You can do it manually by editing file: your_project/node_modules/@ionic_native/spinner-dialog/index.js
Edit pluginRef value as SpinnerDialog from window.plugins.SpinnerDialog

[JaneDawson]

Thank you @FK1453. Works like a charm.

[DifferentialityDevelopment]

Having this exact same issue, fixed it many thanks to @FK1453!

[alpeshvasani]

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