Select to view content in your preferred language

Problem with Implementing Hybrid Reference Layer in Angular

190
3
a month ago
ThomasDale
Emerging Contributor

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

Codepenhttps://codepen.io/aaron003/pen/JjQVbeg

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

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

 

Angular Rendering

ThomasDale_0-1726158270369.png

 

Codepen Rendering

ThomasDale_1-1726158308126.png

 

0 Kudos
3 Replies
AndyGup
Esri Regular Contributor
0 Kudos
ThomasDale
Emerging Contributor

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

 

0 Kudos
AndyGup
Esri Regular Contributor

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

0 Kudos