# ArcGisMapServerImageryProvider not working on Angular 14

**URL:** <https://community.cesium.com/t/arcgismapserverimageryprovider-not-working-on-angular-14/26875>\
**Category:** CesiumJS\
**Created:** [September 20, 2023, 10:39am UTC](https://community.cesium.com/t/arcgismapserverimageryprovider-not-working-on-angular-14/26875 "2023-09-20T10:39:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ursula\_Abreu](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ursula_abreu/32/16102_2.png) [@Ursula\_Abreu](https://community.cesium.com/u/Ursula_Abreu)\
**Post date:** [September 20, 2023, 10:39am UTC](https://community.cesium.com/t/arcgismapserverimageryprovider-not-working-on-angular-14/26875/1 "2023-09-20T10:39:34Z")

</div>

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

This is the error I got:

```auto
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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![anneg](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/anneg/32/11217_2.png) [@anneg](https://community.cesium.com/u/anneg)\
**Post date:** [September 20, 2023, 1:02pm UTC](https://community.cesium.com/t/arcgismapserverimageryprovider-not-working-on-angular-14/26875/2 "2023-09-20T13:02:31Z")

</div>

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?