Web Comonents Zone Flags Break Angular Router

boa_panter — Tue, 26 Mar 2024 12:29:18 GMT

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/templates/angular

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/templates/angular/src/zone-flags.ts

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

Re: Web Comonents Zone Flags Break Angular Router

AndyGup — Tue, 26 Mar 2024 14:52:15 GMT

Hi @boa_panter please see my comments and post additional information in this other thread: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/zoom-buttons-don-t-work-in-angular-map-component/m-p/1398115/highlight/true#M84074.

topic Web Comonents Zone Flags Break Angular Router in ArcGIS JavaScript Maps SDK Questions

Web Comonents Zone Flags Break Angular Router

Re: Web Comonents Zone Flags Break Angular Router