Select to view content in your preferred language

Compass widget not working in angular

1294
6
Jump to solution
12-01-2023 06:05 AM
ErsiLover
Occasional Contributor

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:
ErsiLover_0-1701439445235.png

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

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
AndyGup
Esri Regular Contributor

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

 

 

View solution in original post

6 Replies
AndyGup
Esri Regular Contributor

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

AndyGup
Esri Regular Contributor

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
Occasional Contributor

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:

ErsiLover_1-1701685267426.png

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

 

0 Kudos
AndyGup
Esri Regular Contributor

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
Occasional Contributor

Thank you 🙂

0 Kudos
AndyGup
Esri Regular Contributor

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

0 Kudos