I have a very simple Angular application containing a map component. The map renders fine, but the nothing happens when clicking either zoom button. The app is so simple I'm at a loss as to why the zoom buttons aren't working. @AndyGup would you have any pointers? Unfortunately my sample app is too large to upload here.
@AlagappanA please provide a minimum reproducible app, here are the instructions: https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application. The Angular sample is a great starting place: https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-angular-cli.
Hi @AndyGup , We tried all the steps given in https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-angular-cli#known-issues
We installed zone.js 0.14.5 version, then tried latest 0.14.10 version, then tried the workaround to disable monkey patching of DOM click event
Buttons on the map still didn't work. Any suggestions please ?
The button click not working was an Angular bug that's been fixed in zone.js version 0.14.5, so you'll need to upgrade to use the "@latest" version that your Angular install supports. If you aren't able to update zone.js, then the workaround isto disable zone.js monkey patching as documented here: https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-angular-cli#known-issues.
neither of these work for me. I am curious if the issue is coming from the fact that the new zoom buttons are actually calcite-button components and angular does't know what to do with them? Do we need to install calcite and register those custom components?
Hi, I have the same problem , I have tried to remove and reinsert the zoom but without success, is there a precise practice to do this ?
I have done so
let zoom = new esri.Zoom({view: view});
view.ui.remove("zoom");
view.ui.add(zoom, "top-left");
Update: the Angular team merged the bug fix. Now we wait for the next release of zone.js.
yes. I think for now it is good to remove zoom component from mapview and add it back. This works smoothly.
Even I faced similar issue with webscene, if anyone else facing this issue. Than use loadAll function of webscene and on load event of webscene add it to sceneview.
this.map = new WebScene({
Thanks for letting us know @GabrielWatson. We are aware that the workaround isn't going to work for all implementations. Because of that, we encourage you, @ShaneBuscher1 and anyone else using Angular to thumbs up the Angular pull request. Here's the link: https://github.com/angular/angular/pull/54602. And, we are keeping our eye on it.
Footnote: there has been motion on updating zone.js related to the Angular 18-next release.
As a heads up for anyone else trying to apply the workaround with the ZoneJS flag on click: That option completely breaks our application, as it hoses up Angular Material drop-down select components.
I've found that manually removing the zoom component and adding it back in appears to work for the time being. As of right now the open PR to fix Angular is 3 weeks old and still unmerged.
Thanks for getting back. I'll give the workaround a shot.
It's related to an Angular bug in zone.js. A fix will hopefully be available in the next zone.js release since the pull request is approved and ready-to-go: https://github.com/angular/angular/pull/54602. We have documented a temporary workaround in our Angular esm-sample's README: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli#known-issues.
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
