My team develop an angular 5 application that has been in production for a while, but we've been tasked recently with making the app work in other 3 sites the company owns. One site is a SPA built with Angular6, other is also a SPA but uses Angular5, while the other is using some older libraries such as jQuery.
Management wanted us to integrate with the Angular5 SPA right away so we just exported the whole application as a module with child routes and let the other application do the bootstrap.
But I'm afraid the above approach will not work for the non-angular site. This also tight couple both applications since the 'host' app needs to know about all dependencies of our application which is not a trivial app (I'd say is pretty big) and install them, this caused problems when both applications needed different versions of the same dependency, no to mention that we will need to sync when upgrading dependencies or the framework itself. I don't think this approach will scale when embedding the app into more sites.
My first idea for a more general implementation was to upgrade our app to Angular 6 and create a web component with a custom element, but we need to support IE11 and Edge which do not support native encapsulation, so we would need to test our app in every site where it is used, to make sure they are not breaking our styles, also I don't know whether a web component can manage child routes or not.
Other idea is to use an iframe but my problem here is the iframe resizing to adapt to the content and how to add child routes in the 'host' app from the 'resident' app inside the iframe.
Is there a better way to achieve what we need to do?
The ideal solution should allow our application to be used in multiple sites (each one providing specific configuration) without us having to know about the site using our app.
Thanks for your help.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
