Nativescript navigation, ngrx, and maps(google, MapBox) having subscriber/navigation issues - google-maps

Question

EDIT: It appears my change detection and lifecycle breaks entirely after navigation to a different component. Why?
I'm having some strange problems with#ngrx/store on nativescript and nativescript map based plugins for google maps and mapbox. Code is correct, maps load perfect with data(markers set) but having issues with subscribing or navigating.
I'ved tried both and they work perfect until I attempt navigation;
With google maps:
Navigation and subscribing to data in other pages works perfect until I try to navigate back/forward again to the maps. I always get an error on google map's onReady method.
With MapBox:
navigation works fine including going back to maps. However, my async pipe fails to actually populate other page data until I navigate back to the original map component!!! I assume the subscriber don't get triggered upon navigating. I managed to get it almost working if I don't unsubscribe with ngOnDestroy() but this sends old or wrong data obviously.
Here is code
Map page(first component):
ngOnDestroy() {
this.subscription.unsubscribe();
}
this is the mapbox code but it's similar for googlemaps, executes with map is loaded and add markers(no problems here on both googlemaps or mapbox).
onMapReady(args) {
let mapMarkers = [];
this.subscription = this.store
.select('mainData')
.subscribe((data: any) => {
if (data !== null) {
this.markers = data.markers.map((mark) => {
return {
lat: mark.venue.lat,
lng: mark.venue.lon,
iconPath: this.iconMaker(mark.group, mark.sport),
userData: mark,
onTap: (marker) => {
let urlExt = "/event/" + mark.id; this.routerExtensions.navigate([urlExt]);
},
}
});
args.map.addMarkers(this.markers);
}
});
When I tap on a map marker, it navigates to this second page(event/:id) that displays the event data related to the map marker.
Event Component
Html:
<StackLayout *ngFor=" let model of models |async" orientation="vertical">
<StackLayout orientation="horizontal" style="padding: 3">
<Label class="h2" textWrap="true" text="Venue: "></Label>
<Label class="h2" textWrap="true" [text]="model.venue.name"></Label>
</StackLayout>
...
Component:
ngOnInit() {
this.route.params
.forEach((params) => {
this.id = +params['id'];
console.dir("Found match" + this.id);
if (params['id']) {
used async pipe to send data to html. In google maps this works perfect, in mapbox it doesn't trigger until I attempt to navigate away. I also attempted to just subscribe to the returned Observable but still same outcome in MapBox;Html not waiting for async loads fine.
this.models = this.mapService.getEvent(this.id);
});
}
});
}
This all works 100% perfect in google maps except I can't navigate back to my map component without it instantly crashing.
I would love for either to work.
I do get lots of errors
for unlinking rxjs module leading me to believe that might be an issue:
02-07 14:29:59.523 24939 24939 W System.err: remove failed: EACCES (Permission denied) : /data/local/tmp/org.nativescript.pickn/sync/tns_modules/rxjs/src/MiscJSDoc.ts
02-07 14:29:59.543 5475 5475 E audit : type=1400 msg=audit(1486499399.523:327875): avc: denied { unlink } for pid=24939 comm="ivescript.pickn" name="MiscJSDoc.ts" dev="sda17" ino=463318 scontext=u:r:untrusted_app:s0:c512,c768 tcontext=u:object_r:shell_data_file:s0 tclass=file permissive=0
02-07 14:29:59.573 24939 24939 W System.err: remove failed: EACCES (Permission denied) : /data/local/tmp/org.nativescript.pickn/sync/tns_modules/rxjs/src/observable/dom/MiscJSDoc.ts
02-07 14:29:59.593 5475 5475 E audit : type=1400 msg=audit(1486499399.573:328068): avc: denied { unlink } for pid=24939 comm="ivescript.pickn" name="MiscJSDoc.ts" dev="sda17" ino=463540 scontext=u:r:untrusted_app:s0:c512,c768 tcontext=u:object_r:shell_data_file:s0 tclass=file permissive=0

Answer 1

AFAIK, with ngrx, the subscription to your store should probably only happen once in your component, instead of every time the onMapReady(args) method is fired, which maybe happening when you navigate back to the map - verify this first by adding a console.log to the onMapReady(args) method.
From what I've seen (now) ngrx subscriptions belong in the constructor method and console.log has helped me understand the life-cycle of numerous components now... :-)
One suggestion might be to:
add a component flag called isMapboxReady
toggle it in the onMapReady method
move the subscription out into the constructor and add a check inside the subscription for if the isMapboxReadyflag is true before adding markers.