Angular micro-frontend reference

The idea

Micro-frontends are easy to describe and awkward to get right: separate applications, each deployable on its own, that still behave like one product for the person using them. This is the smallest version that actually works, built so the moving parts stay visible instead of disappearing into a framework's conventions.

How it works

A shell application hosts two remotes, one for orders and one for the product catalogue, each a separate Angular application that builds and ships independently. The shell reads a manifest mapping remote names to their entry points, then loads a remote's routes on demand as the user navigates, so nothing is fetched until it is needed.

Angular, RxJS and zone.js are shared as single instances with strict version matching. That is the part that bites in practice: without it, every remote quietly ships its own copy of the framework and the runtime ends up running several at once.

Why it exists

This is the architecture I work in daily. Reducing it to a reference small enough to hold in my head separated the ideas that matter — manifest-driven discovery, lazy route loading, shared singletons — from the accumulated decisions any real product carries.