Unternehmensweite Software-Systeme werden oft von mehreren cross-funktionalen Teams implementiert, und um diese Teams zu ermöglichen, neue Funktionen effizient bereitzustellen, ist es wünschenswert, die Notwendigkeit der Koordination zwischen ihnen zu minimieren. Dies erfordert eine Modularisierung, die das System in niedrig gekoppelte Bereiche aufteilt, die von einzelnen Teams betreut werden können. Micro Frontends ist ein architektonischer Stil, der mehrere Vorteile verspricht, wie z.B. eine hohe Autonomie der Teams, aber auch mit zahlreichen Herausforderungen einhergeht.Micro Frontends ergeben separate Build-Prozesse, die mit inkrementellen Builds kombiniert werden können, um die Build-Zeit zu verbessern. Diese Funktion kann auch ohne die Anwendung anderer Aspekte wie der Ausrichtung von Teams auf individuelle Anwendungen oder separaten Bereitstellungen verwendet werden. Jedoch können individuell entwickelte Micro Frontends in der Benutzeroberfläche/Benutzererfahrung (UI/UX) divergieren, was zu einem inkonsistenten Aussehen führt, und das Laden mehrerer Anwendungen erhöht die Anzahl der zu ladenden Bundles, was die Ladezeiten beeinträchtigt und den Speicherdruck erhöht.Das Aufteilen einer Anwendung in niedrig gekoppelte Teile mag ein Best Practice im Allgemeinen sein, aber es ist oft schwierig, die Grenzen zwischen den Vertikalen klar genug zu definieren, um sie als separate Anwendungen zu implementieren. Die Integration in eine umfassende Lösung bringt zusätzliche Komplexität mit sich, und der Wechsel von einer Compile-Zeit-Integration zu einer Laufzeit-Integration hat schwerwiegende Folgen.Das Angular-Team empfiehlt, zu überprüfen, ob Alternativen wie die Implementierung der einzelnen Vertikalen in Monorepos geeignet sind. Es gibt jedoch auch Möglichkeiten, die Nachteile von Micro Frontends zu kompensieren, wie z.B. die Etablierung eines Design-Systems, um eine konsistente UI/UX zu unterstützen, oder das lazy loading einzelner Systemteile.Native Federation ist ein Community-Projekt, das eine enge Integration mit dem Angular CLI bietet und ermöglicht, Micro Frontends mit Angular zu implementieren. Es ermöglicht einer Anwendung, Teile anderer separat gebauter und bereitgestellter Anwendungen lazy zu laden und kann Abhängigkeiten wie Angular oder RxJS zwischen dem Host und den Remotes teilen.Um Native Federation einzurichten, wird ein Schematic bereitgestellt, das die Native Federation-Builder-Delegation an den ApplicationBuilder konfiguriert und eine Konfigurationsdatei federation.config.js erstellt. Die Konfiguration weist einem Remote oder Host einen eindeutigen Namen zu und definiert, welche Abhängigkeiten geteilt werden sollen. Remotes definieren auch exponierte EcmaScript-Module, die in die Shell geladen werden können.Das Schematic fügt auch Code hinzu, um Native Federation in der main.ts zu initialisieren, und um eine Komponente oder Routing-Konfiguration, die von einem Remote exponiert wird, zu laden, wird traditionelles lazy loading mit der loadRemoteModule-Funktion von Native Federation kombiniert.