Javascript ROSBridge object storage error
I am learning how to use RobotWebTools and writing a web interface in Angular 8.
I have a form for providing the connection details to a robot with the ROSBridge package installed and launched. I am successfully making the connection to the robot and getting the ROS-Connection object. For persistence, I then save the ROS-Connection object to storage so I can use it application wide.
However, I run into the following error whenever I retrieve the ROS-Object from storage and attempt to use it in publishing /cmd_vel data to my robot:
core.js:6185 ERROR TypeError: that.ros.callOnConnection is not a function
at Topic.callForSubscribeAndAdvertise (Topic.js:59)
at Topic.push../node_modules/roslib/src/core/Topic.js.Topic.advertise (Topic.js:150)
at Topic.push../node_modules/roslib/src/core/Topic.js.Topic.publish (Topic.js:194)
at AppComponent.test (app.component.ts:72)
at AppComponent_Template_button_click_1_listener (app.component.html:3)
at executeListenerWithErrorHandling (core.js:21693)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:21735)
at HTMLButtonElement.<anonymous> (platform-browser.js:934)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41264)
Aside from a Ros label in front of the original connection object, there seems to be no difference to the object I retrieved from storage. Yet, I get this blocker of an error.
Can anyone help me understand what the issue is and how to resolve it ? I attached a screenshot below. The original connection image is the one above and the storage retrieved image is below it.