Add vector tile map in basemap gallery

[ADITYAKUMAR1]

Hi,

 I am working with ArcGIS JS 4.x. I am trying to add custom basemap layer in Basemap gallery along with the default basemaps. 

this.basemapGallery = new BasemapGallery({
view: mapView,
container: this.basemapGalleryDiv,
source: {
query: {
title: "Custom Basemap",
},
updateBasemapsCallback: (items) => {
if (this.map && this.map.config && this.map.config.map && this.map.config.map.baseMapService) {

baseMapservices = this.map.config.map.baseMapService;

array.forEach(baseMapservices, lang.hitch(this, function (mapservice) {
if (mapservice != null) {
var customBasemapServiceUrl = mapservice.MapServiceURL;

esriUtil.addProxyRule({
urlPrefix: customBasemapServiceUrl,
proxyUrl: _globalGISUrl + "Proxy/proxy.ashx"
});
// let text = customBasemapServiceUrl;
let result = ((customBasemapServiceUrl.endsWith("json")) || (customBasemapServiceUrl.endsWith("VectorTileServer")));

if (result) {
customBasemapLayer = new VectorTileLayer({
url: customBasemapServiceUrl
});
}
else {
customBasemapLayer = new BasemapLayer({ url: customBasemapServiceUrl });
}
this.customBasemap = new Basemap({
baseLayers: [
customBasemapLayer
],
title: mapservice.MapServiceName,
id: mapservice.MapServiceName,
thumbnailUrl: customBasemapServiceUrl + '/info/thumbnail'

// });
});
if (this.customBasemap) {
items.push(this.customBasemap);
} // this.customBasemaps.push(this.customBasemap);
}
}));
}

return items;
}
}

});

This code works fine when I have the vector tile layer ending with .json. But when I try to add vector tile layer from arcgis Server I am not getting any basemap  on the map. When I checked the error I found there is an extra ".pbf " after the tile url.

Any idea why this is behaving tile this and how to fx it?

Thanks

Aditya Kumar