Geolocation plugin issue

Ionic Framework Ionic Angular
1

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.

2

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

3

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.

4

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.

5

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.

6

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.

7

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”

8

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.

9

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.

10

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.

11

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…

12

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
13

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
14

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?

15

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
16

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"
        ]
    }
}
17

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…

18

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

19

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?

20

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

1 Like