Managing Shared Models in Micro-Frontend Architecture

Question

I am currently working on an Angular project with many modules out of which 'admin' and 'account' Both modules share common models stored in a shared folder. Looking ahead, we are considering transitioning to a micro-frontend architecture. I'm seeking guidance on the best approach for managing shared models in a micro-frontend environment. Here are some considerations:

1. Shared Module Approach: Will increase the size of shared module which can be hosted as separate micro frontend but size will grow and will always be loaded even if application module requires part of it.
2. Individual Module Approach: Will result into duplication of models and if any change in models then needs to replicated into multiple micro frontend.
3. Package as External Libraries: Not sure about this, but we can keep all shared models as part of library and use that library wherever required.

I personally think option 3 as good approach but need suggestions from experts who has already faced this issue.

Answer 1

It seems like you're trying to build a components library in the same way that projects such as Angular Material do.

Making it a shared module will work if your overarching project is basically everything in a monorepo, so you can keep all of the code up to date. This approach would also work for a smaller team that modify all of the code.

If your team is larger or you want even greater re-use of your components across many applications, an external library approach works better. That creates some distance between the components and the projects so things will need to have clearer API contracts and things may go out of date easier.