'Render 2 micro-frontend on the same page (root)
I'm struggling with the following scenario when using micro-frontend architecture :
I have a first micro-frontend used to do some search (by exemple I look for persons), I have another micro-frontend used to display the detail of a selected person (reusable with other micro-frontend). both are written in Angular and have their own routing.
I tried to use a framework like single-spa.js to make a "root" where we inject the first app (search app) and a bootstrap modal with the detail (app2), the communication between both is made with a shared state in redux. But both routing enter in conflict, when both app start, they want to route to their default route and it crashed (kind of infinite loop).
Did someone already succeed this scenario may be by using WebComponents, so that all angular app can run independently and that both routing are separate and does not interact with the other app ? and of course without using iFrames ;)
Regards,
Solution 1:[1]
I think https://www.npmjs.com/package/@angular-architects/module-federation could be useful in your use case.
Webpack 5 give the very good capability to federate your modules and compose multiple micro app in one and share resources
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Dharmendra Patel |