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.
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.
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"
}
]
}
]);