Hello,
I was trying to setup ArcGIS webcomponents in Angular 17. I followed the template on GitHub and the official documentation.
https://developers.arcgis.com/javascript/latest/components-get-started-angular/
https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/map-components/te...
It works in the demo and it also kind of works in my real application.
I realized, that the zoom in and out buttons were not working. The reason was, I did not add zone-flags.ts to the polyfills of my application.
https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/blob/main/packages/map-components/te...
After adding that, the buttons work. Great. But this cannot be the correct solution to the problem. It completely breaks the Angular Router. Whenever I click on any a tag (link) which has a routerLink directive attached, Angular complains about routing happening outside NgZone.
<a routerLink="/inventory">Inventory</a>
A simple link like this would not work.
Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
Sometimes the routing would not happen immediately but only after a few seconds.
When removing the polyfills suggested in the template / tutorial, everything works again.
How did you guys solve this issue? The map itself works, zooming in and out with the mouse, dragging the map around... The interaction with the buttons does not, if the polyfill is not added.
Thanks for your help.
Best reagards
Alex
