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. 

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

[ShaneBuscher1]

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

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

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

[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'

    });

      });

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

[imritanshu]

Hi @fb1 

the zoom which you  are removing is the default widget which automatically gets created while creating view and that is why you have passed it in double quotes. 

And the zoom which you are adding is your new instance of zoom widget which is separate from the default one.. 

here no need to create a new instance. Just remove the already created zoom  instance and add it back..

view.ui.remove("zoom");

view.ui.add("zoom", "top-left");

[fb1]

thank you for your reply,

unfortunately I have tried but it doesn't work that way either