Cannot read property of undefined error when trying to use esri/geometry/support/webMercatorUtils in Angular

Question

Hi I'm using Javascript api 4.X with Angular and am getting the subject error when I try to call the xyToLngLat method on webMercatorUtils.  I'm using the esri-loader to load esri modules.

In the code below the PanMap method in the Map Component gets called from Component MtTicketListComponent.  Any ideas where I'm going wrong?

Thanks

Pete

Component 1
export class MtTicketListComponent implements OnInit {
....
public mtMap:MtMapComponent = new MtMapComponent;
...
MarkTicket(ticketData:UnMarkedData) {
this.mtMap.PanMap(ticketData.ptCenterX, ticketData.ptCenterY);
}
}
Map Component
export class MtMapComponent implements OnInit {
...
utilsMerc: __esri.webMercatorUtils

ngOnInit(): void {
loadModules([
'esri/Map',
'esri/views/MapView',
'esri/geometry/support/webMercatorUtils'
])
.then(([EsriMap, EsriMapView, EsriwebMercatorUtils]) => {
this.utilsMerc = new EsriwebMercatorUtils;
...
...
})
...
}
public PanMap(x: number, y: number) {
let coordinates: any = this.utilsMerc.xyToLngLat(x,y);//getting undefined error on this.utilsMerc
..

}

PeteVitt · Answer

Hi John - I've tried that with no luck.  I think my problem is related to this issue (https://github.com/Esri/angular-cli-esri-map/issues/8) discussed over on Github in 2018 about not being able to access the esri typescript namespace outside of the ngOnInit function.  I've put in another issue over there to see if there have been an developments

Thanks

Pete

JohnGrayson · Answer

The help doc says that webMercatorUtils is an Object not a Class, so I don't think we would create a new instance using the 'new' keyword.  I wonder if this would work in your code:

let coordinates: any = EsriwebMercatorUtils.xyToLngLat(x,y);