Problem with Implementing Hybrid Reference Layer in Angular

[ThomasDale]

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

[AndyGup]

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

[ThomasDale]

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

[AndyGup]

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