An error occurred while rendering. Rendering has stopped. Cesium PointGraphics Entity

CesiumJS
1

Hi, I am a relatively new user of CesiumJS and I am trying to render a globe in angular. I am able to do so, but I get an error saying that some properties are null (attaching it below) and the rendering stops.

This error arises when I click on the entity (pointgraphic or the label).

Could a fix please be suggested for this.


An error occurred while rendering. Rendering has stopped.
TypeError: Cannot read properties of null (reading 'clientWidth')
TypeError: Cannot read properties of null (reading 'clientWidth') at SelectionIndicatorViewModel.update 
(https://ajax.googleapis.com/ajax/libs/cesiumjs/1.94/Build/Cesium/Cesium.js:56:214941) at Viewer._onTick 
(https://ajax.googleapis.com/ajax/libs/cesiumjs/1.94/Build/Cesium/Cesium.js:56:267625) at Event.raiseEvent 
(https://ajax.googleapis.com/ajax/libs/cesiumjs/1.94/Build/Cesium/Cesium.js:39:36277) at Clock.tick 
(https://ajax.googleapis.com/ajax/libs/cesiumjs/1.94/Build/Cesium/Cesium.js:41:314911) at CesiumWidget.render 
(https://ajax.googleapis.com/ajax/libs/cesiumjs/1.94/Build/Cesium/Cesium.js:56:163895) at n 
(https://ajax.googleapis.com/ajax/libs/cesiumjs/1.94/Build/Cesium/Cesium.js:56:149643) at timer

Attaching angular code below for reference.

    if (this.cesiumViewer !== null) {
      return;
    }

    try {
      await this.loadScript(CESIUM_URL);
    } catch (error) {
      console.log('not loaded'); 
    }

    if (this.cesiumViewer !== null) {
      return;
    }

    (Cesium as any) = window['Cesium'];
    if (!Cesium) return;

    Cesium.Ion.defaultAccessToken = CESIUM_ACCESS_TOKEN;

    const metadata =
        new Cesium.GoogleEarthEnterpriseMetadata('https://' + <...>);
    const imageryProvider = new Cesium.GoogleEarthEnterpriseImageryProvider(
        {metadata, url: 'https://' + <...>});
    Cesium.TrustedServers.add(<...>, 443);

    const terrainProvider = Cesium.createWorldTerrain();

    const viewerOptions = {
      homeButton: false,
      baseLayerPicker: false,
      geocoder: false,
      navigationHelpButton: false,
      sceneModePicker: false,
      animation: false,
      timeline: false,
      fullscreenButton: false,
      imageryProvider,
      terrainProvider,
      requestRenderMode: true,
    };

    this.cesiumViewer = new Cesium.Viewer('cesium-canvas', viewerOptions);
    this.handler =
        new Cesium.ScreenSpaceEventHandler(this.cesiumViewer.scene.canvas);


    this.locationPin = new Cesium.Entity({
      position: Cesium.Cartesian3.fromRadians(12.97, 77.58),
      point: new Cesium.PointGraphics({
        pixelSize: 15,
        color: Cesium.Color.RED,
      }),
      label: new Cesium.LabelGraphics(
          {text: 'some-label', verticalOrigin: Cesium.VerticalOrigin.TOP})
    });

    this.cesiumViewer.canvas.height = 400;
    this.cesiumViewer.canvas.width = 800;

    this.cesiumViewer.entities.add(this.locationPin);
2

Hey @pranjal_walia :wave:

It would be great if you could provide a reproducable demo for your case. Check out how to do it in this link Troubleshooting Cesium and Angular apps