Currently, I have a legacy AngularJS (Angular 1) app that cannot undergo any major changes at the moment.
A new standalone app has been created using a newer stack. The goal is to integrate this new app into the old legacy app without making significant modifications.
One option is to use an iframe:
<div id="i-am-old-app">
<iframe src="www.mynewapp.com/index.html"></iframe>
</div>
Alternatively, a custom web component can also be utilized:
<div id="i-am-old-app">
<my-new-app-web-component></my-new-app-web-component>
</div>
Are there any other approaches that could be more effective? The main objective is to ensure optimal performance of the app and avoid the need for redeployment in the old app whenever updates are made to the new app's code.