Dynamically load another Angular app in a Angular app

Question

I am currently looking for a solution in angular on how I could load a separate application into one. Something like:

applicationA    
- main.js
- vendor.js
- 1.js (chunk)

applicationB
- main.js
- vendor.js
- 1.js
- 2.js

applicationA will load applicationB on route /appb and also able to do appb/subroute.

The ultimate goal for this is so that multiple teams can develop multiple apps separately and when something is changed in applicationA, all the application that is called by applicationA does not need to redeploy.

I was looking at this article and got me really close: https://medium.com/angular-in-depth/building-extensible-dynamic-pluggable-enterprise-application-with-angular-aed8979faba5. However, I could not get it to run with sub route and is build on top of a set of modules, not an application.

Finally, an article from Manfred Steyer , https://www.angulararchitects.io/aktuelles/dynamic-module-federation-with-angular/, this one is what I really want, but, this is build on an "next" technology that are yet mature and not an Angular release nor in its roadmap (I think).

Question: Has anyone have built this kind of solution that I can get some pointers from?

Answer 1

Try using Nx by Nrwl.io. Given your use case you will greatly benefit from it. Its relatively easy to setup and is immensely powerful and robust