Fix compilation errors

apps/showcase/project.json

@@ -22,7 +22,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumError": "2mb"
             },
             {
               "type": "anyComponentStyle",

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

@@ -47,9 +47,11 @@ <h3 matSubheader>{{ cat }}</h3>
             mat-list-item
             [routerLink]="'/demo/' + (isEditMode ? '/edit/' : '') + route.path"
             routerLinkActive="active"
-            [routerLinkActiveOptions]="{
-              _routerLinkActiveWakeUpHack_: isEditMode
-            }"
+            [routerLinkActiveOptions]="
+              $any({
+                _routerLinkActiveWakeUpHack_: isEditMode
+              })
+            "
             #exampleLink
           >
             {{ route.data.label }}

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

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 
 :host,
 .content {

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

@@ -27,7 +27,7 @@ export class DemoIndexComponent implements OnInit, AfterViewInit {
   categories: Category[];
   searchTerm: string;
   sidenavIsOpen = true;
-  isEditMode = !!this.activatedRoute.snapshot.firstChild!.params.demoUrl;
+  isEditMode = !!this.activatedRoute.snapshot.firstChild?.params['demoUrl'];
 
   @ViewChildren('exampleLink', { read: ElementRef })
   exampleLinks: QueryList<ElementRef>;
@@ -39,8 +39,8 @@ export class DemoIndexComponent implements OnInit, AfterViewInit {
     private mapResizeService: MapResizeService
   ) {
     this.originalRoutes = groupBy(DEMO_ROUTES[0].children, (route) =>
-      route.data ? route.data.cat : null
-    ) as any as RoutesByCategory;
+      route.data ? route.data['cat'] : null
+    ) as unknown as RoutesByCategory;
     this.categories = [
       Category.STYLES,
       Category.LAYERS,
@@ -64,16 +64,17 @@ export class DemoIndexComponent implements OnInit, AfterViewInit {
   }
 
   toggleEdit(change: MatSlideToggleChange) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const snapshot = this.activatedRoute.snapshot.firstChild!;
     if (change.checked) {
       this.router.navigate(['demo', 'edit', snapshot.url[0].path]);
     } else {
-      this.router.navigate(['demo', snapshot.params.demoUrl]);
+      this.router.navigate(['demo', snapshot.params['demoUrl']]);
     }
   }
 
   onSidenavChange() {
-    this.mapResizeService.resize$.next();
+    this.mapResizeService.resize$.next(undefined);
   }
 
   search() {
@@ -83,7 +84,7 @@ export class DemoIndexComponent implements OnInit, AfterViewInit {
       category.forEach((route, index) => {
         if (
           route.data &&
-          !(route.data.label as string)
+          !(route.data['label'] as string)
             .toLowerCase()
             .includes(this.searchTerm.toLowerCase())
         ) {

apps/showcase/src/app/demo/demo.module.ts

@@ -15,7 +15,6 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { RouterModule } from '@angular/router';
 import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
-import { NgxMapboxGlGeocoderControlModule } from 'ngx-mapbox-gl-geocoder-control';
 
 import { LayoutModule } from '../shared/layout/layout.module';
 import { DemoIndexComponent } from './demo-index.component';
@@ -45,7 +44,6 @@ import { LanguageSwitchComponent } from './examples/language-switch.component';
 import { LiveUpdateFeatureComponent } from './examples/live-update-feature.component';
 import { LiveUpdateImageSourceComponent } from './examples/live-update-image-srource.component';
 import { LocateUserComponent } from './examples/locate-user.component';
-import { MapboxGlGeocoderComponent } from './examples/mapbox-gl-geocoder.component';
 import { MarkerAlignmentComponent } from './examples/marker-alignment.component';
 import { NavigationComponent } from './examples/navigation.component';
 import {
@@ -77,7 +75,6 @@ import { StackblitzEditComponent } from './stackblitz-edit/stackblitz-edit.compo
     FormsModule,
 
     NgxMapboxGLModule,
-    NgxMapboxGlGeocoderControlModule,
 
     LayoutModule,
 
@@ -118,7 +115,6 @@ import { StackblitzEditComponent } from './stackblitz-edit/stackblitz-edit.compo
     FullscreenComponent,
     NavigationComponent,
     LocateUserComponent,
-    MapboxGlGeocoderComponent,
     AttributionPositionComponent,
     NgxScaleControlComponent,
     NgxCustomControlComponent,

apps/showcase/src/app/demo/examples/3d-buildings.component.ts

@@ -1,15 +1,15 @@
 import { Component } from '@angular/core';
-import { Map, SymbolLayer } from 'mapbox-gl';
+import { AnyLayer, Map } from 'mapbox-gl';
 
 @Component({
   selector: 'showcase-demo',
   template: `
     <mgl-map
       [style]="'mapbox://styles/mapbox/light-v9'"
-      [zoom]="15.5"
+      [zoom]="[15.5]"
       [center]="[-74.0066, 40.7135]"
-      [pitch]="45"
-      [bearing]="-17.6"
+      [pitch]="[45]"
+      [bearing]="[-17.6]"
       (mapLoad)="onLoad($event)"
     >
       <mgl-layer
@@ -48,16 +48,22 @@ import { Map, SymbolLayer } from 'mapbox-gl';
   styleUrls: ['./examples.css'],
 })
 export class Display3dBuildingsComponent {
-  labelLayerId: string;
+  labelLayerId?: string;
 
   onLoad(mapInstance: Map) {
-    const layers = mapInstance.getStyle().layers!;
+    const layers = mapInstance.getStyle().layers;
+    if (!layers) {
+      return;
+    }
+    this.labelLayerId = this.getLabelLayerId(layers);
+  }
 
+  private getLabelLayerId(layers: AnyLayer[]) {
     for (const layer of layers) {
-      if (layer.type === 'symbol' && layer.layout!['text-field']) {
-        this.labelLayerId = layer.id;
-        break;
+      if (layer.type === 'symbol' && layer.layout?.['text-field']) {
+        return layer.id;
       }
     }
+    return;
   }
 }

apps/showcase/src/app/demo/examples/add-image-generated.component.ts

@@ -23,6 +23,7 @@ import { Component, OnInit } from '@angular/core';
             features: [
               {
                 type: 'Feature',
+                properties: {},
                 geometry: {
                   type: 'Point',
                   coordinates: [0, 0]

apps/showcase/src/app/demo/examples/add-image.component.ts

@@ -21,6 +21,7 @@ import { Component } from '@angular/core';
             features: [
               {
                 type: 'Feature',
+                properties: {},
                 geometry: {
                   type: 'Point',
                   coordinates: [0, 0]

apps/showcase/src/app/demo/examples/center-on-symbol.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MapMouseEvent, Map } from 'mapbox-gl';
+import { Map, MapMouseEvent } from 'mapbox-gl';
 
 @Component({
   selector: 'showcase-demo',
@@ -37,19 +37,19 @@ export class CenterOnSymbolComponent {
   map: Map;
   cursorStyle: string;
 
-  center = [-90.96, -0.47];
+  center: [number, number] = [-90.96, -0.47];
 
   geometries = [
     {
-      type: 'Point',
+      type: 'Point' as const,
       coordinates: [-91.395263671875, -0.9145729757782163],
     },
     {
-      type: 'Point',
+      type: 'Point' as const,
       coordinates: [-90.32958984375, -0.6344474832838974],
     },
     {
-      type: 'Point',
+      type: 'Point' as const,
       coordinates: [-91.34033203125, 0.01647949196029245],
     },
   ];

apps/showcase/src/app/demo/examples/cluster.component.ts

@@ -75,9 +75,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./examples.css'],
 })
 export class ClusterComponent implements OnInit {
-  earthquakes: object;
+  earthquakes: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
 
   async ngOnInit() {
-    this.earthquakes = await import('./earthquakes.geo.json');
+    this.earthquakes = (await import(
+      './earthquakes.geo.json'
+    )) as unknown as GeoJSON.FeatureCollection<GeoJSON.Geometry>;
   }
 }

apps/showcase/src/app/demo/examples/custom-marker-icons.component.ts

@@ -28,38 +28,38 @@ import { Component } from '@angular/core';
 })
 export class CustomMarkerIconsComponent {
   geojson = {
-    type: 'FeatureCollection',
+    type: 'FeatureCollection' as const,
     features: [
       {
-        type: 'Feature',
+        type: 'Feature' as const,
         properties: {
           message: 'Foo',
           iconSize: [60, 60],
         },
         geometry: {
-          type: 'Point',
+          type: 'Point' as const,
           coordinates: [-66.324462890625, -16.024695711685304],
         },
       },
       {
-        type: 'Feature',
+        type: 'Feature' as const,
         properties: {
           message: 'Bar',
           iconSize: [50, 50],
         },
         geometry: {
-          type: 'Point',
+          type: 'Point' as const,
           coordinates: [-61.2158203125, -15.97189158092897],
         },
       },
       {
-        type: 'Feature',
+        type: 'Feature' as const,
         properties: {
           message: 'Baz',
           iconSize: [40, 40],
         },
         geometry: {
-          type: 'Point',
+          type: 'Point' as const,
           coordinates: [-63.29223632812499, -18.28151823530889],
         },
       },

apps/showcase/src/app/demo/examples/heatmap.component.ts

@@ -20,7 +20,7 @@ import { Layer } from 'mapbox-gl';
         <mgl-layer
           *ngFor="let layer of clusterLayers"
           [id]="layer.id"
-          [type]="layer.type"
+          [type]="$any(layer.type)"
           source="earthquakes"
           [filter]="layer.filter"
           [paint]="layer.paint"
@@ -44,11 +44,13 @@ import { Layer } from 'mapbox-gl';
   styleUrls: ['./examples.css'],
 })
 export class HeatMapComponent implements OnInit {
-  earthquakes: object;
+  earthquakes: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
   clusterLayers: Layer[];
 
   async ngOnInit() {
-    this.earthquakes = await import('./earthquakes.geo.json');
+    this.earthquakes = (await import(
+      './earthquakes.geo.json'
+    )) as unknown as GeoJSON.FeatureCollection<GeoJSON.Geometry>;
     const layersData: [number, string][] = [
       [0, 'green'],
       [20, 'orange'],

apps/showcase/src/app/demo/examples/live-update-feature.component.ts

@@ -9,7 +9,7 @@ import { LngLatLike } from 'mapbox-gl';
       [zoom]="zoom"
       [center]="center"
       [centerWithPanTo]="true"
-      [pitch]="pitch"
+      [pitch]="[pitch]"
       movingMethod="jumpTo"
     >
       <mgl-geojson-source *ngIf="data" id="trace" [data]="data">
@@ -33,19 +33,17 @@ import { LngLatLike } from 'mapbox-gl';
 export class LiveUpdateFeatureComponent implements OnInit, OnDestroy {
   data: GeoJSON.FeatureCollection<GeoJSON.LineString>;
   center: LngLatLike;
-  zoom = [0];
+  zoom: [number] = [0];
   pitch: number;
 
   private timer: number;
 
-  constructor() {}
-
   async ngOnInit() {
     const data: GeoJSON.FeatureCollection<GeoJSON.LineString> = (await import(
       './hike.geo.json'
     )) as any;
-    const coordinates = data.features[0].geometry!.coordinates;
-    data.features[0].geometry!.coordinates = [coordinates[0]];
+    const coordinates = data.features[0].geometry.coordinates;
+    data.features[0].geometry.coordinates = [coordinates[0]];
     this.data = data;
     this.center = coordinates[0] as [number, number];
     this.zoom = [14];
@@ -54,7 +52,7 @@ export class LiveUpdateFeatureComponent implements OnInit, OnDestroy {
     this.timer = window.setInterval(() => {
       if (i < coordinates.length) {
         this.center = coordinates[i] as [number, number];
-        data.features[0].geometry!.coordinates.push(coordinates[i]);
+        data.features[0].geometry.coordinates.push(coordinates[i]);
         this.data = { ...this.data };
         i++;
       } else {

apps/showcase/src/app/demo/examples/live-update-image-srource.component.ts

@@ -31,7 +31,7 @@ import { interval, Subscription } from 'rxjs';
 export class LiveUpdateImageSourceComponent implements OnInit, OnDestroy {
   private sub: Subscription;
   private readonly size = 0.001;
-  center: number[];
+  center: [number, number];
 
   url = 'assets/red.png';
   coordinates: number[][];
@@ -40,10 +40,10 @@ export class LiveUpdateImageSourceComponent implements OnInit, OnDestroy {
     const data: GeoJSON.FeatureCollection<GeoJSON.LineString> = (await import(
       './hike.geo.json'
     )) as any;
-    const points = data.features[0].geometry!.coordinates;
+    const points = data.features[0].geometry?.coordinates;
     const coordinates = points.map((c) => this.makeRectangle(c));
 
-    this.center = points[0];
+    this.center = points[0] as [number, number];
     this.coordinates = coordinates[0];
 
     let i = 0;