Compass widget not working in angular

[ErsiLover]

Hello I have an issue with a compass widget, the issue is that even though I rotate the map and the click on the compass it doesn't rotate back so that north is up. This is my code:

(my typescript):

import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';

import Map from '@arcgis/core/Map.js';

import MapView from '@arcgis/core/views/MapView.js';

import Compass from '@arcgis/core/widgets/Compass';

export class AppComponent  implements OnInit{

 @ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef;

  map!: Map;

  mapView!: MapView;

 compass!: Compass;

ngOnInit() {

    this.initializeMap();

}

initializeMap(): MapView {

    this.map = new Map({

      basemap: 'hybrid',

    });

    this.mapView = new MapView({

      container: this.mapViewEl.nativeElement,

      map: this.map,

      zoom: 7,

      center: [17, 44.3],

    });

    let compass = new Compass({

      view: this.mapView,

    });

    this.mapView.ui.add(compass, 'top-left');

    return this.mapView;

  }


this is my html:

<div #mapViewNode></div>

this is the example:

I click on the compass but nothing happens, any idea why?

[AndyGup]

Thanks for reporting, I am able to repro on 4.28 and 4.29-next. We'll take a closer look.

[AndyGup]

This appears to be related to a known issue with Calcite: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli#known-issues. Try disabling the zone.js monkey patching for click events. Here's a diff that shows what you need to do  https://github.com/Esri/jsapi-resources/issues/481#issuecomment-1687048980.

[ErsiLover]

If I understood correctly I need to add "src/zone-flags.js" to angular.json in polyfills before zone.js and this is how it looks for me:

but the compass is still not working as expected did I miss something?

[AndyGup · Accepted solution]

I have a TODO to clarify these steps on the jsapi-resources repo. Here they are in case you missed something. Note, I verified these steps on Angular 17, since we only test against the latest production version of frameworks.

Create src/zone-flags.ts file, and then add this:

(window as any).__zone_symbol__UNPATCHED_EVENTS = ['click'];

In angular.json, make this adjustment:

            "polyfills": [
              "src/zone-flags",
              "zone.js"
            ],

In tsconfig.app.json make this adjustment:

  "files": [
    "src/zone-flags.ts",
    "src/main.ts"
  ],

[ErsiLover]

Thank you 🙂

[AndyGup]

The Angular bug has been fixed in zone.js version 0.14.5. We recommend updating zone.js if you are having issues with the SDK's widgets.  https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli#known-issues