I'm currently loading an ArcGIS Esri Web Map which is having some layers in my Angular application. But after loading the map successfully, I'm getting more than 20 console errors as below.

What could be the issue for getting the below console error?

Console error: - [esri.views.2d.layers.features.sources.FeatureSource] details: error: details: "[object]" message: "Error" name: "request:server" [[Prototype]]: Object tile: T {key: i, bounds: Array(4), objectIds: Set(0), tileInfoView: _, resolution: 9783.939620500008, …} [[Prototype]]: Object message: "Encountered error when fetching tile" name: "mapview-query-error" [[Prototype]]: o

.ts file

// Initialize MapView and return an instance of MapView
  initializeMap(esriToken) {
    const container = this.mapViewEl.nativeElement;
    config.apiKey = esriToken;
    esriConfig.request.timeout = 300000;
    const horizonData: any[] = this.esiriData || [];

    //load the webMap
    const webmap = new WebMap({
          portalItem: {
            id: this.webMapId
          }
        });

    // load the ParcelAtlas feature layer
    const layer = new FeatureLayer({
        url: this.featureLayerUrl,
        });
      webmap.add(layer);

    const view = new MapView({
      container,
      map: webmap,
      zoom: 4,
      center: [-97.63, 38.34],
    });


  const renderer = new SimpleRenderer({
    symbol: new TextSymbol({
      color: "red",
      text: "\ue612",
      font: {
        size: 15,
        family: "CalciteWebCoreIcons"
    }
    })
  });

  const dataFeedLayer = new FeatureLayer({
    source: horizonData.map((d,i)=>(
      {
          geometry: new Point({
            longitude: d.longitude,
            latitude: d.latitude
          }),
          attributes: {
            ObjectID: i,
            ...d
          }
      }
    )),
  objectIdField: 'ObjectID',
  geometryType: "point",
  renderer: renderer,
});

  webmap.add(dataFeedLayer);
  this.view = view;
  return this.view.when();

  }

.html file

<!-- Map Div -->
<div #mapViewNode></div>