One thing that makes micro-frontends confusing is that developers use the word "sharing" to describe several completely different problems:

Sometimes they mean sharing a UI component from another team's app at runtime.

Sometimes they mean sharing live application state (like the currently selected user or student) across boundaries.

Sometimes they mean sharing common source code (like a design system or utility library) without copy-pasting it across repositories.

These are fundamentally different problems, and they require different architectural solutions.

Let's break them down using a practical, real-world architecture: an Angular-based School Management System . We will look at how a Shell application dynamically loads independently deployed micro-frontends (Student and Fee), how those applications communicate without becoming tightly coupled, how shared libraries work at build time versus runtime, and how to choose the right patterns for production.

1.…