@angular-architects/module-federation to customize a monolith build

Question

In our company we are trying to implement micro frontend concept using @angular-architects/module-federation plugin. We used very basic configuration, nothing special, so decided to not prepare any code samples for this post (https://www.npmjs.com/package/@angular-architects/module-federation). This is just to gather some ideas or ready concept solutions if any.

This module-federation approach would help us to isolate different views from each other in code, deploy and test them separately, and develop them almost independently from our monolith frontend shell. However, due to some CI/CD pipelines difficulties we decided to not jump to that approach yet and try to only keep code in separate projects per micro frontend for now and still be able to build and deploy them together with monolith (meaning it would be one single output folder where some special MF files would lay too).

On this picture there is a monolith spa(shell/monolith) and micro frontend microapp-sample output folders. Essentially we want to merge them during build (pick only MF files from micro frontend folder and put to monolith folder). As a start we think it could be done by writing custom angular builder, but we are not sure if there is such a possibility for a builder to process many projects/webpack configs at a time and build them as a one output project.

This idea is currently on hold because we did not find ready solutions for this kind of build task and we are not sure if we really want to spend time to write some complicated custom build logic just for checking this proof of concept. 

Does anybody have any idea if this could be done and how? 

Answer 1

Nx could be one way for an easy mono-repository multi app setup, that includes Module Federation for angular apps since v14.

https://nx.dev/module-federation/micro-frontend-architecture