topic Re: Problem with Implementing Hybrid Reference Layer in Angular in ArcGIS JavaScript Maps SDK Questions

Problem with Implementing Hybrid Reference Layer in Angular

ThomasDale — Thu, 12 Sep 2024 16:25:35 GMT

Has anyone had an issue with implementing the World Imagery Layer and Hybrid Reference Layer in Angular? I'm currently running into an issue where the labels are rendering inconsistently. Rarely, they will render as normal, i.e. white dot next to the label name, but most of the time it will render with a black box next to the label name. I have a codepen that only uses HTML and JS, and it is working as I would expect. I'm guessing there is an issue with how Angular initializes its components...maybe something to do with zone.js. Does anyone have a solution?

Links to codepen and layers

Codepen: https://codepen.io/aaron003/pen/JjQVbeg

Hybrid Reference Layer: https://www.arcgis.com/home/item.html?id=30d6b8271e1849cd9c3042060001f425

World Imagery: https://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9

Angular Rendering

Codepen Rendering

Re: Problem with Implementing Hybrid Reference Layer in Angular

AndyGup — Fri, 13 Sep 2024 17:48:40 GMT

Hi @ThomasDale, you'll also need to provide a minimal Angular repro app: https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application.

Re: Problem with Implementing Hybrid Reference Layer in Angular

ThomasDale — Fri, 13 Sep 2024 20:56:22 GMT

Hi @AndyGup ,

Thank you for the recommendation. I set up a simple StackBlitz to reproduce the issue: https://stackblitz.com/edit/stackblitz-starters-vedhs2

Please follow these instructions to run the project. I apologize in advance for the inconvenience. I had to downgrade to Angular 13

run from the terminal (in order):

cd arcgis-hybrid-ref-layer npm install npm start

Re: Problem with Implementing Hybrid Reference Layer in Angular

AndyGup — Fri, 13 Sep 2024 21:46:04 GMT

The project didn't work, it has configuration issues in Stackblitz and when I tried to run it locally. Also, make sure to include reference to the SDK's CSS. My recommendation is to try adding your functionality to this Angular sample: https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-angular-cli