How to render a single spa angular microfrontend within another microfrontend (base)...

I am transitioning our HIS application from a monolithic angular application to a single spa microfrontend architecture. Note that i'am limited to nodeJS ver. 14. I want to do this gradually by separating only one module at a time and implementing it as a single spa angular microfrontend with the rest of the application as another single microfrontend along with a root config project that manages all the microfrontends. My problem is that I have to render the module eg security, within the base app based on some route. The base and security must be active at the same time since the layout is defined in the base app along with some other critical components. How can do I do this? Any guidance or pointers would be really helpful and appreciated. I have been stuck on this for two weeks and need to make progress ASAP.

I tried a placeholder component that uses SystemJS.import(registered-module-name).mount("some-div"); But this wont work with the lazy loading present in the Application.

Continue reading...