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

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"
  ],