nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Zoom Buttons don't work in Angular Map Component

ShaneBuscher1

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.

Najděte více příspěvků označených jako

Accepted answers

All comments

AndyGup

@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.

AlagappanA

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 ?

AndyGup

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.

LeeTaEthni

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?

fb1

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

AndyGup

Update: the Angular team merged the bug fix. Now we wait for the next release of zone.js.

imritanshu

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({

portalItem: {

id: sceneId,

});

this.map.loadAll()

.catch((error: any) => {

console.log(error);

})

.then(() => {

this.mapView = new SceneView({

map: this.map,

container: 'mapContainer'

});

AndyGup

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.

GabrielWatson

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.

ShaneBuscher1

Thanks for getting back. I'll give the workaround a shot.

AndyGup

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.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.