Geolocation plugin issue

Hi all,
I’m having problems using geolocation plugin in my Ionic 5 project with Angular (I’m using VisualStudio Code, if can help).
I’ve added cordova-plugin-geolocation to my project and then installed the @ionic/native geolocation plugin.
As indicated by the various tutorials that I found, I added to app.module.ts:

import { Geolocation } from ‘@ionic-native/geolocation/ngx’

but when I try to insert it in providers list,

providers: [
StatusBar,
SplashScreen,
Geolocation,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
]

VS Code reports me following problem:

Type ‘GeolocationOriginal’ is not assignable to type ‘Provider’.
Type ‘GeolocationOriginal’ is missing the following properties from type ‘any’: length, pop, push, concat, and 26 more.

And so I can’t compile…
I really don’t understand what’s wrong in my code.
Thanks in advance.

I for one would like to see the dependencies in package.json.

Hi @rapropos,
these are the dependencies in package.json:

@angular/animations”: “^9.0.6”,
@angular/common”: “~8.2.14”,
@angular/core”: “~8.2.14”,
@angular/forms”: “~8.2.14”,
@angular/platform-browser”: “~8.2.14”,
@angular/platform-browser-dynamic”: “~8.2.14”,
@angular/router”: “~8.2.14”,
@auth0/angular-jwt”: “^4.0.0”,
@ionic-native/core”: “^5.22.0”,
@ionic-native/geolocation”: “^5.22.0”,
@ionic-native/splash-screen”: “^5.0.0”,
@ionic-native/status-bar”: “^5.0.0”,
@ionic/angular”: “^5.0.0”,
@ionic/storage”: “^2.2.0”,
“cordova-plugin-geolocation”: “^4.0.2”,
“cordova-sqlite-storage”: “^5.0.0”,
“core-js”: “^2.5.4”,
“rxjs”: “~6.5.1”,
“tslib”: “^1.9.0”,
“zone.js”: “~0.9.1”

Thanks for your reply and for your help.

I’m concerned about the mixing of 8.x and 9.x @angular stuff, but unlikely that’s related here. I should have been more clear earlier, though. devDependencies may also be related.

Sorry it was my mistake not to also include the devDependencies.
For the sake of completeness, this is the entire code of package.json:

{
“name”: “IonicProject”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
@angular/animations”: “^9.0.6”,
@angular/common”: “~8.2.14”,
@angular/core”: “~8.2.14”,
@angular/forms”: “~8.2.14”,
@angular/platform-browser”: “~8.2.14”,
@angular/platform-browser-dynamic”: “~8.2.14”,
@angular/router”: “~8.2.14”,
@auth0/angular-jwt”: “^4.0.0”,
@ionic-native/core”: “^5.22.0”,
@ionic-native/geolocation”: “^5.22.0”,
@ionic-native/splash-screen”: “^5.0.0”,
@ionic-native/status-bar”: “^5.0.0”,
@ionic/angular”: “^5.0.0”,
@ionic/storage”: “^2.2.0”,
“cordova-plugin-geolocation”: “^4.0.2”,
“cordova-sqlite-storage”: “^5.0.0”,
“core-js”: “^2.5.4”,
“rxjs”: “~6.5.1”,
“tslib”: “^1.9.0”,
“zone.js”: “~0.9.1”
},
“devDependencies”: {
@angular-devkit/build-angular”: “~0.803.20”,
@angular/cli”: “~8.3.23”,
@angular/compiler”: “~8.2.14”,
@angular/compiler-cli”: “~8.2.14”,
@angular/language-service”: “~8.2.14”,
@ionic/angular-toolkit”: “^2.1.1”,
@types/jasmine”: “~3.3.8”,
@types/jasminewd2”: “~2.0.3”,
@types/node”: “~8.9.4”,
“codelyzer”: “^5.0.0”,
“jasmine-core”: “~3.4.0”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~4.1.0”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.0.1”,
“karma-jasmine”: “~2.0.1”,
“karma-jasmine-html-reporter”: “^1.4.0”,
“protractor”: “~5.4.0”,
“ts-node”: “~7.0.0”,
“tslint”: “~5.15.0”,
“typescript”: “~3.4.3”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-sqlite-storage”: {},
“cordova-plugin-geolocation”: {}
}
}
}

P.S.: I also noticed the version difference related to @angular/animations, but it is probably due to the version of the Angular Cli installed on the computer.

I don’t think that’s possible, because package.json is strictly responsible for the local project. I’m starting to get the sense that this is a (very) old project that has been upgraded in place. If that’s true, it might be worthwhile to spawn a completely new project and parachute your existing app source into it.

If you instead want to still hacking around on this existing one, typescript looks like the first thing I would worry about. It looks very old. My current Ionic projects are using 3.7.5.

That’s a project started about a couple of months ago, and then restarted about a couple of weeks ago copying the whole app folder.
it’s my first “real” project developed with Ionic Framework, so I completely rely on your advice.
what do you think is the best solution, start again with a new project?
P.S: If i start a new Ionic project, in package.json I still have:

“typescript”: “~3.4.3”

If possible, yes, emphatically. Every time there is a major version upgrade involving either Ionic or Angular, that’s what I do. In fact, I’m right in the middle of this process for a four-app suite as we speak, going from Ionic 3 / Angular 5 to Ionic 5 / Angular 9.

Hmm.

What I did was to spawn new projects, and then follow the guides here to get to Angular 9. That page discusses TypeScript versions specifically, and Angular 9 is going to want TS 3.7.

I noticed that @angular/animations”: “^9.0.6” was an unused package so i removed it. I also tried to start a new project after updating node and ionic cli, but when the project is created, in my package.json I still have “typescript”: “~3.4.3”.
So I’ve updated manually tsc and update to angular 9 following the guide.
Now that’s my package.json:

{
“name”: “ionicproject”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
@angular/common”: “~9.1.0”,
@angular/core”: “~9.1.0”,
@angular/forms”: “~9.1.0”,
@angular/platform-browser”: “~9.1.0”,
@angular/platform-browser-dynamic”: “~9.1.0”,
@angular/router”: “~9.1.0”,
@auth0/angular-jwt”: “^4.0.0”,
@capacitor/core”: “1.5.1”,
@ionic-native/core”: “^5.0.0”,
@ionic-native/geolocation”: “^5.23.0”,
@ionic-native/splash-screen”: “^5.0.0”,
@ionic-native/status-bar”: “^5.0.0”,
@ionic/angular”: “^5.0.0”,
@ionic/storage”: “^2.2.0”,
“cordova-plugin-geolocation”: “^4.0.2”,
“cordova-sqlite-storage”: “^5.0.0”,
“core-js”: “^2.5.4”,
“rxjs”: “~6.5.1”,
“tslib”: “^1.10.0”,
“zone.js”: “~0.10.2”
},
“devDependencies”: {
@angular-devkit/build-angular”: “~0.901.0”,
@angular/cli”: “~9.1.0”,
@angular/compiler”: “~9.1.0”,
@angular/compiler-cli”: “~9.1.0”,
@angular/language-service”: “~9.1.0”,
@capacitor/cli”: “1.5.1”,
@ionic/angular-toolkit”: “^2.1.1”,
@types/jasmine”: “~3.3.8”,
@types/jasminewd2”: “~2.0.3”,
@types/node”: “^12.11.1”,
“codelyzer”: “^5.1.2”,
“jasmine-core”: “~3.4.0”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~4.1.0”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.0.1”,
“karma-jasmine”: “~2.0.1”,
“karma-jasmine-html-reporter”: “^1.4.0”,
“protractor”: “~5.4.0”,
“ts-node”: “~7.0.0”,
“tslint”: “~5.15.0”,
“typescript”: “^3.8.3”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-sqlite-storage”: {},
“cordova-plugin-geolocation”: {}
}
}
}

But unfortunately the problem with Geolocation has remained…
P.S: The code is compiled succesfully and everything else is working fine.

Can I interpret this to mean that at this point it’s strictly a VS Code issue? If that’s the case, not much else I can say, because I’ve never used VS Code.

Sorry, I misspoke, the code without Geolocation is compiled successfully and everything else works fine…
I meant that the update to Angular 9 is working, but hasn’t resolved the problem…

I’m wondering if there may be a subtle version skew issue within your ionic-native ecosystem, so it might be worth investigating what versions you actually have installed in your project. I fear you’re on Windows, and I don’t know how much POSIX shell compatibility you have. On UNIX, one would do something like this:

$ find node_modules/@ionic-native/ -name package.json | xargs grep version

Hi, I’m on Windows, so I can’t execute the command you wrote, but if I’ve understood what is your goal (check the version of each package installed in node_modules/@ionic-narive) I can confirm that they’re all 5.23.0 because I’ve checked manually every version attribute of every package.json file in that directory.

1 Like

Yes, that’s what it was intended to look for. I just tried dropping @ionic-native/geolocation into a scratch project and it built fine, so I can’t reproduce your error. I did note, however, while doing that, that Capacitor has an alternative, so perhaps you may look into adopting this instead?

I tried Capacitor Geolocation instead of Cordova and it works!
I’m now really curious to find out why I was having problems with that, but I’m very grateful to you for the help and for the time you spent on my issue!

1 Like

Here is my package.json file using cordova-plugin-geolocation and I use VS Code 1.43.2.

One option might be to delete your node_modules directory and package-lock.json and npm i

{
    "name": "AppName",
    "version": "3.0.0",
    "description": "Ionic App",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "postinstall": "node version.js"
    },
    "private": true,
    "dependencies": {
        "@angular/common": "~8.2.14",
        "@angular/core": "~8.2.14",
        "@angular/forms": "~8.2.14",
        "@angular/platform-browser": "~8.2.14",
        "@angular/platform-browser-dynamic": "~8.2.14",
        "@angular/router": "~8.2.14",
        "@ionic-native/core": "^5.0.0",
        "@ionic-native/geolocation": "^5.16.0",
        "@ionic-native/splash-screen": "^5.0.0",
        "@ionic-native/status-bar": "^5.0.0",
        "@ionic/angular": "^5.0.0",
        "cordova-android": "^8.1.0",
        "cordova-plugin-geolocation": "^4.0.2",
        "core-js": "^2.5.4",
        "rxjs": "~6.5.1",
        "tslib": "^1.9.0",
        "zone.js": "~0.9.1"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.803.23",
        "@angular/cli": "~8.3.22",
        "@angular/compiler": "~8.2.14",
        "@angular/compiler-cli": "~8.2.14",
        "@angular/language-service": "~8.2.14",
        "@babel/compat-data": "^7.8.0",
        "@ionic/angular-toolkit": "^2.1.1",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "^5.0.0",
        "cordova-config": "^0.7.0",
        "cordova-plugin-device": "^2.0.2",
        "cordova-plugin-ionic-keyboard": "^2.2.0",
        "cordova-plugin-ionic-webview": "^4.1.3",
        "cordova-plugin-splashscreen": "^5.0.2",
        "cordova-plugin-statusbar": "^2.4.2",
        "cordova-plugin-whitelist": "^1.3.3",
        "cordova-version": "^0.1.3",
        "gulp": "^4.0.2",
        "gulp-bump": "^3.1.3",
        "gulp-file": "^0.4.0",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.15.0",
        "typescript": "~3.4.3"
    },
    "cordova": {
        "plugins": {
            "cordova-plugin-whitelist": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-ionic-webview": {
                "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
            },
            "cordova-plugin-ionic-keyboard": {},
            "cordova-plugin-geolocation": {}
        },
        "platforms": [
            "android"
        ]
    }
}

Hi @jarodms,
thanks for your reply. I tried to delete node_modules and package-lock.json, and to re-install all by running npm i but unfortunately it didn’t resolve the problem…

Hey Mirko,
any news on that? I am facing exactly the same issue.

Hi, i have the same problem, but in my case, the error gets when i add plugins ionic camera(’@ionic-native/camera/ngx), thats is your problem to?

Hi everyone, I found the error. In my case It was shown from the file module.ts in the line "import { Geolocation } from ‘@ionic-native/geolocation/ngx’ and that is the funny of this, because the error wasn’t in this line, the error was on the import component page where it was written “import { Geolocation } from '@ionic-native/geolocation/”, when you add “ngx” (import { Geolocation } from '@ionic-native/geolocation/ngx) in the page the error in the “module.ts” disapears.

sorry for my english.

regards