Is it possible to run multiple apps with different angular versions on one page?

Question

I want to run multiple angular2 applications on one page. Additionally they should run in different versions.

I know: Angular is designed to be a single page application framework and so the use case I described is pretty exotic. Nevertheless I want to know if it is theoretically possible?

I've already managed to get it run, my only problem was, that zone-js has a variable on the global namespace and throws an error when getting loaded more than once. When I load zone-js only once, the two angular applications run side-by-side. You can see the different angular versions in the dom.

But now my question(s) in more detail: Do I have to worry when running two angular applications running side-by-side on one page? Does it make sense to load other dependencies only once? What when maybe angular major version 4 depend on another zone-js major version - I can't load them both on one page? Is it OK to load all webpack bundles twice (inline.bundle.js, vendor.bundle.js, main.bundle.js)?

Answer 1

We are trying to solve a similar problem and we found a meta-framework that we found satisfactorily manages micro front end (SPAs) In fact, we were able to bring in other SPAs that were built by different teams with different JS frameworks with little to no effort.

There may be a lot of reasons against doing this as such an app may not exactly be referred to as performant. I would say the reason for undertaking such a thing in our case was need for federated development: we have lots of small teams not which are not co-located and independent as far as delivery timelines that contribute to our gargantuan app which was earlier built on .net platform as a monolithic MV* webapp.