Maps styling error on production build

[umsuka]

Hello

I am having issues when exporting the production build for my application which is built in Ionic (Angular), when building a debug version its exporting fine no issues, the moment I attach a --prod tag, its not exporting and highlighting [styles] as an error.

Here is my dev environment and app version

Ionic:

   Ionic CLI                     : 6.20.1 (C:\Users\xxx\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.1.13
   @angular-devkit/build-angular : 14.0.5
   @angular-devkit/schematics    : 14.0.5
   @angular/cli                  : 14.0.5
   @ionic/angular-toolkit        : 6.1.0

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.6.0) : 1.5.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\xxx\AppData\Local\Android\Sdk)
   NodeJS            : v16.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 8.13.2
   OS                : Windows 10

See screenshot on how we want the map to look and how it looks during dev.

This is the error I get when I try to export an apk for release ...

Error: src/app/pages/home/home.page.html:15:113 - error TS2322: Type '({ elementType: string; stylers: { color: string; }[]; 
featureType?: undefined; } | { elementType: string; stylers: { visibility: string; }[]; featureType?: undefined; } | 
{ featureType: string; elementType: string; stylers: { ...; }[]; })[]' is not assignable to type 'MapTypeStyle[]'.
  Type '{ elementType: string; stylers: { color: string; }[]; featureType?: undefined; } | 
{ elementType: string; stylers: { visibility: string; }[]; featureType?: undefined; } | { featureType: string; elementType: string; 
stylers: { ...; }[]; }' is not assignable to type 'MapTypeStyle'.
    Type '{ elementType: string; stylers: { color: string; }[]; featureType?: undefined; }' is not assignable to type 'MapTypeStyle'.
      Types of property 'elementType' are incompatible.
        Type 'string' is not assignable to type 'MapTypeStyleElementType'.

15  [streetViewControl]="false" [disableDefaultUI]="true" [mapTypeControl]="false" [zoomControl]="false" [styles]="mapStyling">
                                                                                                                   ~~~~~~

  src/app/pages/home/home.page.ts:57:16
    57   templateUrl: "./home.page.html",
                      ~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomePage.

This is the map styles file that I am using

export const mapStyles = ([
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
]);

Thanks

[umsuka]

Hi All

Just incase someone else has the same problem.
Here is a solution I implemented

export const mapStyles: google.maps.MapTypeStyle[] = [

]