CODEWITHSUNDEEP
angulargeolocationangular11
fieldhof
fieldhof

Reputation: 185

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

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
  }
}

Upvotes: 12

Views: 7359

Answers (6)

Sher Singh
Sher Singh

Reputation: 287

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);
      });

  }

Upvotes: 0

Matt Tew
Matt Tew

Reputation: 1621

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.

Upvotes: 1

Faisal Mushtaq
Faisal Mushtaq

Reputation: 605

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

Upvotes: 0

Sanid Sa
Sanid Sa

Reputation: 303

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

Upvotes: 0

Richard
Richard

Reputation: 4840

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]

Upvotes: 25

blitiri
blitiri

Reputation: 11

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.

Upvotes: 0

Related Questions