CODEWITHSUNDEEP
rxjsionic3ionic-nativerxjs6
Patrick Obafemi
Patrick Obafemi

Reputation: 1066

Property 'filter' does not exist on type 'Observable<Geoposition>'. Google Maps

I have a taxi booking app that uses Ionic Geolocation and Firebase Firestore. My code was not working with the firestore package so i had to update rxjs to version 6. It brought up the error 

'Property 'filter' does not exist on type 'Observable<Geoposition>'. '

Here is my code

import { filter } from 'rxjs/operators';



    const subscription = this.geo.watchPosition()
                          .filter((p) => p.coords !== undefined) //Filter Out Errors
                          .subscribe(position => {
                          let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                          this.map.setCenter(latLng);
                          this.lat = position.coords.latitude;
                          this.long = position.coords.longitude;
                          console.log(this.long + ' ' + this.lat);
});

my package.json file

"@ionic-native/core": "~4.15.0",
"@ionic-native/geolocation": "^4.17.0",
"@ionic-native/splash-screen": "~4.15.0",
"@ionic-native/status-bar": "~4.15.0",
"@ionic/storage": "2.2.0",
"angularfire2": "^5.1.0",
"cordova-plugin-geolocation": "^4.0.1",
"firebase": "^5.5.7",
"ionic-angular": "3.9.2",
"ionic-native": "^2.9.0",
"ionicons": "3.0.0",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",

What is wrong with my code?

Upvotes: 0

Views: 675

Answers (1)

Patrick Obafemi
Patrick Obafemi

Reputation: 1066

Thanks to @JB Nizet and @martin for their contributions. I just remembered that in the latest versions of rxJs you have to use the .pipe operator when chaining txjs operators like filters and map. here is my updated code

const subscription = this.geo.watchPosition()
                          .pipe(filter((p) => p.coords !== undefined)) //Filter Out Errors
                          .subscribe(position => {
                          let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                          this.map.setCenter(latLng);
                          this.lat = position.coords.latitude;
                          this.long = position.coords.longitude;
                          console.log(this.long + ' ' + this.lat);
});

Upvotes: 1

Related Questions