IONIC - IOS TypeError

CesiumJS
1

Hello guys,

I'm using IONIC 4 with angular 6 to build an hybrid app with cesium, in Android all smooth when it gets to IOS i always get the following error when entering the viewer.

TypeError: undefined is not an object (evaluating 'this._dataSourceDisplay.update')
_onTick@http://localhost:8080/scripts.js:542:24329
raiseEvent@http://localhost:8080/scripts.js:451:22847
tick@http://localhost:8080/scripts.js:461:9290
render@http://localhost:8080/scripts.js:539:16542
t@http://localhost:8080/scripts.js:539:10013
onInvokeTask@http://localhost:8080/vendor.js:34928:43
runTask@http://localhost:8080/polyfills.js:2510:57
invokeTask@http://localhost:8080/polyfills.js:2818:41
timer@http://localhost:8080/polyfills.js:4376:34\

Does someone knows how to fix this?

Regards
André Lopes Santos

2

BTW this is the example i'm running

Thanks in advance.

3

I can’t think of anything off the top of my head why it would work on Android but not on iOS.

Is your code just initializing the viewer and not adding anything else? Does it work fine on desktop/in Safari?

I would try using the unminified version of CesiumJS so that when you get the stack trace it’ll be easier to see which line(s) are throwing the error. Let me know if you can get that.

4

*Is your code just initializing the viewer and not adding anything else?
Yes only the viewer through an angular directive.

*Does it work fine on desktop/in Safari?
Yes it works fine in every desktop browser.

(I would try using the unminified version of CesiumJS so that when you get the stack trace it'll be easier to see which line(s) are throwing the error.) - I'm on it

Thank you

5

To run the unminified version i've updated my angular.json file to look for the "CesiumUnminified" directory instead of the "Cesium" one.

The line numbers changed but the error is still not very conclusive.

" ERROR: An error occurred while rendering. Rendering has stopped.
undefined
TypeError: undefined is not an object (evaluating 'this._dataSourceDisplay.update')
_onTick@http://localhost:8080/scripts.js:256857:48
raiseEvent@http://localhost:8080/scripts.js:3621:35
tick@http://localhost:8080/scripts.js:44924:31
render@http://localhost:8080/scripts.js:250532:47
render@http://localhost:8080/scripts.js:249914:38
onInvokeTask@http://localhost:8080/vendor.js:34928:43
runTask@http://localhost:8080/polyfills.js:2510:57
invokeTask@http://localhost:8080/polyfills.js:2818:41
timer@http://localhost:8080/polyfills.js:4376:34"

Even on the IOS emulator for iphone 8 shows this error when trying to start the viewer.

6

Thanks for trying that. You’re using version 1.49 of CesiumJS right?

It looks like _dataSourceDisplay never gets initialized. Can you try to debug this a little further? In Cesium.js, around line 255725 is when it creates this initial DataSourceDisplay. Is the value of that undefined at that point?

Does ionic do any sort of transpiling/translating of the code? Is the code in script.js different from the original Cesium.js?

7

Hello Omar,

i got it to run by realising in debug that the DataSourceDisplay assignment to the global variable is not reached in the iOS platform ...

Translating :wink: :

        var scene = cesiumWidget.scene;

        var dataSourceDisplay = new DataSourceDisplay({
            scene : scene,
            dataSourceCollection : dataSourceCollection
        });

        this._dataSourceDisplay = dataSourceDisplay; //i've placed the last line manually since this the following code is never reached in iOS

Code that should be reach but is not for some reason:

        //Assign all properties to this instance. No "this" assignments should
        //take place above this line.
        this._baseLayerPickerDropDown = baseLayerPickerDropDown;
        this._fullscreenSubscription = fullscreenSubscription;
        this._vrSubscription = vrSubscription;
        this._vrModeSubscription = vrModeSubscription;
        this._dataSourceChangedListeners = {};
        this._automaticallyTrackDataSourceClocks = defaultValue(options.automaticallyTrackDataSourceClocks, true);
        this._container = container;
        this._bottomContainer = bottomContainer;
        this._element = viewerContainer;
        this._cesiumWidget = cesiumWidget;
        this._selectionIndicator = selectionIndicator;
        this._infoBox = infoBox;
        this._dataSourceCollection = dataSourceCollection;
        this._destroyDataSourceCollection = destroyDataSourceCollection;
        this._dataSourceDisplay = dataSourceDisplay;

8

Well after some debug all works fine with this options to false;

     * fullscreenButton: false
     * vrButton: false

Thank you for the attention Ormar

Regards
André

9

That is quite peculiar, I wonder why that option fixes it, and why that code was never reached in the first place.

Thanks for digging into this and providing a fix! I’m sure it’ll benefit many others.