Refactor ngx-mapbox-gl to support zoneless change detection

.vscode/settings.json

@@ -7,5 +7,6 @@
     "**/.DS_Store": true,
     ".ng_build": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "terminal.integrated.env.osx": {}
 }

apps/showcase/src/app/demo/demo-index.component.ts

@@ -1,5 +1,5 @@
 import {
-  AfterViewInit,
+  afterNextRender,
   Component,
   ElementRef,
   NgZone,
@@ -21,7 +21,7 @@ type RoutesByCategory = { [P in Category]: Routes };
   templateUrl: './demo-index.component.html',
   styleUrls: ['./demo-index.component.scss'],
 })
-export class DemoIndexComponent implements OnInit, AfterViewInit {
+export class DemoIndexComponent implements OnInit {
   routes: RoutesByCategory;
   originalRoutes: RoutesByCategory;
   categories: Category[];
@@ -42,16 +42,16 @@ export class DemoIndexComponent implements OnInit, AfterViewInit {
       route.data ? route.data['cat'] : null
     ) as unknown as RoutesByCategory;
     this.categories = Object.values(Category);
+
+    afterNextRender(() => {
+      this.scrollInToActiveExampleLink();
+    });
   }
 
   ngOnInit() {
     this.routes = this.originalRoutes;
   }
 
-  ngAfterViewInit() {
-    this.scrollInToActiveExampleLink();
-  }
-
   toggleSidenav() {
     this.sidenavIsOpen = !this.sidenavIsOpen;
   }
@@ -93,16 +93,14 @@ export class DemoIndexComponent implements OnInit, AfterViewInit {
   }
 
   private scrollInToActiveExampleLink() {
-    this.zone.onStable.pipe(first()).subscribe(() => {
-      const activeLink = this.exampleLinks.find((elm) =>
-        (elm.nativeElement as HTMLElement).classList.contains('active')
-      );
-      if (activeLink) {
-        scrollIntoView(activeLink.nativeElement as HTMLElement, {
-          block: 'center',
-          scrollMode: 'if-needed',
-        });
-      }
-    });
+    const activeLink = this.exampleLinks.find((elm) =>
+      (elm.nativeElement as HTMLElement).classList.contains('active')
+    );
+    if (activeLink) {
+      scrollIntoView(activeLink.nativeElement as HTMLElement, {
+        block: 'center',
+        scrollMode: 'if-needed',
+      });
+    }
   }
 }

libs/ngx-mapbox-gl/src/lib/map/map.component.spec.ts

@@ -9,6 +9,7 @@ import {
 import { ReplaySubject } from 'rxjs';
 import { MapComponent } from './map.component';
 import { MapService, SetupMap } from './map.service';
+import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 
 describe('MapComponent', () => {
   class MapServiceSpy {
@@ -27,6 +28,7 @@ describe('MapComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [MapComponent],
+      providers: [provideExperimentalZonelessChangeDetection()],
     })
       .overrideComponent(MapComponent, {
         set: {
@@ -36,9 +38,10 @@ describe('MapComponent', () => {
       .compileComponents();
   }));
 
-  beforeEach(() => {
+  beforeEach(async () => {
     fixture = TestBed.createComponent(MapComponent);
     component = fixture.debugElement.componentInstance;
+    await fixture.whenStable();
     msSpy = fixture.debugElement.injector.get<MapService>(MapService) as any;
   });
 

libs/ngx-mapbox-gl/src/lib/map/map.component.ts

@@ -1,5 +1,5 @@
 import {
-  AfterViewInit,
+  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
@@ -55,7 +55,6 @@ export class MapComponent
   implements
     OnChanges,
     OnDestroy,
-    AfterViewInit,
     Omit<MapboxOptions, 'bearing' | 'container' | 'pitch' | 'zoom'>,
     MapEvent
 {
@@ -309,63 +308,63 @@ export class MapComponent
 
   @ViewChild('container', { static: true }) mapContainer: ElementRef;
 
-  constructor(private mapService: MapService) {}
-
-  ngAfterViewInit() {
-    this.warnDeprecatedOutputs();
-    this.mapService.setup({
-      accessToken: this.accessToken,
-      customMapboxApiUrl: this.customMapboxApiUrl,
-      mapOptions: {
-        collectResourceTiming: this.collectResourceTiming,
-        container: this.mapContainer.nativeElement,
-        crossSourceCollisions: this.crossSourceCollisions,
-        fadeDuration: this.fadeDuration,
-        minZoom: this.minZoom,
-        maxZoom: this.maxZoom,
-        minPitch: this.minPitch,
-        maxPitch: this.maxPitch,
-        style: this.style,
-        hash: this.hash,
-        interactive: this.interactive,
-        bearingSnap: this.bearingSnap,
-        pitchWithRotate: this.pitchWithRotate,
-        clickTolerance: this.clickTolerance,
-        attributionControl: this.attributionControl,
-        logoPosition: this.logoPosition,
-        failIfMajorPerformanceCaveat: this.failIfMajorPerformanceCaveat,
-        preserveDrawingBuffer: this.preserveDrawingBuffer,
-        refreshExpiredTiles: this.refreshExpiredTiles,
-        maxBounds: this.maxBounds,
-        scrollZoom: this.scrollZoom,
-        boxZoom: this.boxZoom,
-        dragRotate: this.dragRotate,
-        dragPan: this.dragPan,
-        keyboard: this.keyboard,
-        doubleClickZoom: this.doubleClickZoom,
-        touchPitch: this.touchPitch,
-        touchZoomRotate: this.touchZoomRotate,
-        trackResize: this.trackResize,
-        center: this.center,
-        zoom: this.zoom,
-        bearing: this.bearing,
-        pitch: this.pitch,
-        renderWorldCopies: this.renderWorldCopies,
-        maxTileCacheSize: this.maxTileCacheSize,
-        localIdeographFontFamily: this.localIdeographFontFamily,
-        transformRequest: this.transformRequest,
-        bounds: this.bounds ? this.bounds : this.fitBounds,
-        fitBoundsOptions: this.fitBoundsOptions,
-        antialias: this.antialias,
-        locale: this.locale,
-        cooperativeGestures: this.cooperativeGestures,
-        projection: this.projection,
-      },
-      mapEvents: this,
+  constructor(private mapService: MapService) {
+    afterNextRender(() => {
+      this.warnDeprecatedOutputs();
+      this.mapService.setup({
+        accessToken: this.accessToken,
+        customMapboxApiUrl: this.customMapboxApiUrl,
+        mapOptions: {
+          collectResourceTiming: this.collectResourceTiming,
+          container: this.mapContainer.nativeElement,
+          crossSourceCollisions: this.crossSourceCollisions,
+          fadeDuration: this.fadeDuration,
+          minZoom: this.minZoom,
+          maxZoom: this.maxZoom,
+          minPitch: this.minPitch,
+          maxPitch: this.maxPitch,
+          style: this.style,
+          hash: this.hash,
+          interactive: this.interactive,
+          bearingSnap: this.bearingSnap,
+          pitchWithRotate: this.pitchWithRotate,
+          clickTolerance: this.clickTolerance,
+          attributionControl: this.attributionControl,
+          logoPosition: this.logoPosition,
+          failIfMajorPerformanceCaveat: this.failIfMajorPerformanceCaveat,
+          preserveDrawingBuffer: this.preserveDrawingBuffer,
+          refreshExpiredTiles: this.refreshExpiredTiles,
+          maxBounds: this.maxBounds,
+          scrollZoom: this.scrollZoom,
+          boxZoom: this.boxZoom,
+          dragRotate: this.dragRotate,
+          dragPan: this.dragPan,
+          keyboard: this.keyboard,
+          doubleClickZoom: this.doubleClickZoom,
+          touchPitch: this.touchPitch,
+          touchZoomRotate: this.touchZoomRotate,
+          trackResize: this.trackResize,
+          center: this.center,
+          zoom: this.zoom,
+          bearing: this.bearing,
+          pitch: this.pitch,
+          renderWorldCopies: this.renderWorldCopies,
+          maxTileCacheSize: this.maxTileCacheSize,
+          localIdeographFontFamily: this.localIdeographFontFamily,
+          transformRequest: this.transformRequest,
+          bounds: this.bounds ? this.bounds : this.fitBounds,
+          fitBoundsOptions: this.fitBoundsOptions,
+          antialias: this.antialias,
+          locale: this.locale,
+          cooperativeGestures: this.cooperativeGestures,
+          projection: this.projection,
+        },
+        mapEvents: this,
+      });
+      if (this.cursorStyle) {
+        this.mapService.changeCanvasCursor(this.cursorStyle);
+      }
     });
-    if (this.cursorStyle) {
-      this.mapService.changeCanvasCursor(this.cursorStyle);
-    }
   }
 
   ngOnDestroy() {

libs/ngx-mapbox-gl/src/lib/map/map.service.ts

@@ -8,7 +8,6 @@ import {
 } from '@angular/core';
 import MapboxGl from 'mapbox-gl';
 import { AsyncSubject, Observable, Subscription } from 'rxjs';
-import { first } from 'rxjs/operators';
 import {
   LayerEvents,
   MapEvent,
@@ -100,32 +99,29 @@ export class MapService {
   }
 
   setup(options: SetupMap) {
-    // Need onStable to wait for a potential @angular/route transition to end
-    this.zone.onStable.pipe(first()).subscribe(() => {
-      // Workaround rollup issue
-      // this.assign(
-      //   MapboxGl,
-      //   'accessToken',
-      //   options.accessToken || this.MAPBOX_API_KEY
-      // );
-      if (options.customMapboxApiUrl) {
-        (MapboxGl.baseApiUrl as string) = options.customMapboxApiUrl;
-      }
-      this.createMap({
-        ...(options.mapOptions as MapboxGl.MapboxOptions),
-        accessToken: options.accessToken || this.MAPBOX_API_KEY || '',
-      });
-      this.hookEvents(options.mapEvents);
-      this.mapEvents = options.mapEvents;
-      this.mapCreated.next(undefined);
-      this.mapCreated.complete();
-      // Intentionnaly emit mapCreate after internal mapCreated event
-      if (options.mapEvents.mapCreate.observed) {
-        this.zone.run(() => {
-          options.mapEvents.mapCreate.emit(this.mapInstance);
-        });
-      }
+    // Workaround rollup issue
+    // this.assign(
+    //   MapboxGl,
+    //   'accessToken',
+    //   options.accessToken || this.MAPBOX_API_KEY
+    // );
+    if (options.customMapboxApiUrl) {
+      (MapboxGl.baseApiUrl as string) = options.customMapboxApiUrl;
+    }
+    this.createMap({
+      ...(options.mapOptions as MapboxGl.MapboxOptions),
+      accessToken: options.accessToken || this.MAPBOX_API_KEY || '',
     });
+    this.hookEvents(options.mapEvents);
+    this.mapEvents = options.mapEvents;
+    this.mapCreated.next(undefined);
+    this.mapCreated.complete();
+    // Intentionnaly emit mapCreate after internal mapCreated event
+    if (options.mapEvents.mapCreate.observed) {
+      this.zone.run(() => {
+        options.mapEvents.mapCreate.emit(this.mapInstance);
+      });
+    }
   }
 
   destroyMap() {