Javascript ROSBridge object storage error

edit

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.