Angular 11: Why can't the compiler find 'GeolocationPosition' during compiling? "Cannot find name 'GeolocationPosition'"

Question

Why does the angular compiler can't find GeolocationPosition and GeolocationPositionError? VSC doesn't give an error and only during compiling it gives me an error.

Error: src/app/modules/shared/services/position.service.ts:10:46 - error TS2304: Cannot find name 'GeolocationPosition'.

10   private positionSource = new ReplaySubject<GeolocationPosition>(1);

I worked around this by putting the any type instead, but I'm just curious why Angular is giving me the error and how I can fix this.

I've already tried different compiler targets (es5, es6, es2018) but with no luck. Already installed @types/core-js but also without any luck. Is there any @types module that I'm missing perhaps?

This is my current tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Apologete

you need to fix your imports – Shechem

@RachidO I assume the import of GeolocationPosition? Which package provides this? – Apologete

Did you find the answer? Just hit this myself – Panamerican

@Apologete If my answer helped you then please mark it as accepted. – Panamerican

Answer 1

In typescript 4.0.x this type was called Position. In typescript 4.1.x it was renamed to GeolocationPosition.

I think you'll find that your VS Code is using its built in version of typescript and that your project is using an earlier version.

To fix:

npm install --save-dev [email protected]

Panamerican

take note that you probably will have to update angular as well as the earlier minor versions of angular 11 require typescript up to version 4.1.0 – Calica

IntelliJ: Preferences -> Languages & Frameworks -> Typescript. Select a version, and use the npm install --save-dev [email protected] to ensure node isi the same as IntelliJ. – Ensoul

Replacing GeolocationPosition with Position fixed the issue. thanks – Verminous

what about ts 5? – Harleyharli

Answer 2

I had the same issue and I solved changing local Angular CLI used by project.
Explanation:
I updated to Angular 11, but I forgot to update Angular CLI. The ng build gave me this output:

Your global Angular CLI version (9.1.7) is greater than your local
version (9.1.0). The local Angular CLI version is used.

Steps:
Update Angular CLI (if necessary)

npm install -g @angular/cli

Update npm

npm install -g npm

Then ng build output become:

Your global Angular CLI version (11.1.2) is greater than your local version (9.1.0). The local Angular CLI version is used.

Install npm-check-updates

npm i -g npm-check-updates

Execute ncu -u to view packages to update.
Execute npm install to update all packages.
After this, all should work.

Atcliffe

Answer 3

My solution was to change version of ol and ol types from "^6.5.0" to exact version "6.5.0",

"ol": "6.5.0", @types/ol": "6.5.0",

Newer packages have breaking change with GeolocationPositionError type.

Angular 9 - with typescript ~3.8.3

Psaltery

Answer 4

If you are using typescript version below 4, then replacing GeolocationPosition with Position will fix the issue.

Verminous

Answer 5

If you're still using Angular <= 11 and want to futureproof your code, declare the following interfaces

export interface GeolocationCoordinates {
  latitude: number;
  longitude: number;
  altitude: number | null;
  accuracy: number;
  altitudeAccuracy: number | null;
  heading: number | null;
  speed: number | null;
}

export interface GeolocationPosition  {
  coords: GeolocationCoordinates;
  timestamp: number;
}

You can then use GeolocationPosition in place of Position while preventing it from breaking after an upgrade.

Sandra

Answer 6

Sharing a working solution, Create a LocationService

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LocationService {

  constructor() { }

  getLocation(): Observable<GeolocationPosition> {
    return new Observable(observer => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position: GeolocationPosition) => {
            observer.next(position);
            observer.complete();
          },
          (error: GeolocationPositionError) => {
            observer.error(error);
          }
        );
      } else {
        observer.error('Geolocation is not supported by this browser.');
      }
    });
  }

  getLatitude(position: GeolocationPosition): number {
    return position.coords.latitude;
  }

  getLongitude(position: GeolocationPosition): number {
    return position.coords.longitude;
  }

  getPosition(position: GeolocationPosition) {
    console.log(position)
  }

}

And use it in any component

ngOnInit(): void {

    this.locationService.getLocation().
      subscribe((position: GeolocationPosition) => {
        console.log(position);
        this.latitude = this.locationService.getLatitude(position);
        this.longitude = this.locationService.getLongitude(position);
        console.log('Latitude: ', this.latitude);
        console.log('Longitude: ', this.longitude);
      }, (error: any) => {
        console.error('Error getting geolocation:', error);
      });

  }

Hummock