ArcGisMapServerImageryProvider not working on Angular 14

CesiumJS
1

Hello,
I recently migrated from Angular 13 to Angular 14 and I noticed it’s not working anymore.

This is the error I got:

An error occurred while rendering.  Rendering has stopped.
TypeError: Cannot read properties of undefined (reading 'getDerivedResource')
TypeError: Cannot read properties of undefined (reading 'getDerivedResource')

Here is part of my code:

private initializeViewer(el: ElementRef): void {
    this.viewer = new Cesium.Viewer(el.nativeElement, {
      selectionIndicator: false,
      infoBox: false,
      fullscreenButton: false,
      timeline: false,
      animation: false,
      homeButton: false,
      baseLayerPicker: true,
      sceneModePicker: false,
      terrainProviderViewModels: [
        new Cesium.ProviderViewModel(new Wgs84EllipsoidProvider()),
      ],
      imageryProviderViewModels: [
        new Cesium.ProviderViewModel(new EsriWorldImageryProvider()),
        new Cesium.ProviderViewModel(new OpenStreetMapProvider()),
      ],
    });

    this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
      Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    );
  }

export class EsriWorldImageryProvider implements ViewProvider {
  name = 'ESRI World Imagery';
  iconUrl = Cesium.buildModuleUrl(
    'Widgets/Images/ImageryProviders/esriWorldImagery.png'
  );
  tooltip =
    'World Imagery';
  category = 'Other';

  creationFunction(): unknown {
    return new Cesium.ArcGisMapServerImageryProvider({
      url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
      enablePickFeatures: false,
    });
  }
}

If I remove new Cesium.ProviderViewModel(new EsriWorldImageryProvider()), it works fine so I guess that’s where is the error but I tried many things and nothing works. Does anyone know how to fix this problem?

2

I don’t know Angular and I don’t know where ViewProvider comes from.

But Cesium’s ImageryProviders had a recently changed. They need to be constructed by calling fromUrl, e.g. BingMapsImageryProvider.fromUrl. Maybe your EsriWorldImageryProvider needs to be updated accordingly?