Was sind MicroFrontends?

MicroFrontends ist ein Architekturstil zum Erstellen von Webanwendungen, bei dem diese in kleinere, unabhängige und lose gekoppelte Module unterteilt werden. Jedes Modul oder MicroFrontend wird unabhängig entwickelt und bereitgestellt, mit seinen eigenen Abhängigkeiten, Technologien und Teams.

Bei der Implementierung von MicroFrontend in Angular 15 wird die Anwendung in kleinere Teile zerlegt, die unabhängig voneinander entwickelt und bereitgestellt werden können. Jedes MicroFrontend sollte über eine eigene Angular-Anwendung mit eigenen Komponenten, Diensten und Modulen verfügen.

Wichtige Schritte zur Implementierung von MicroFrontend in Angular 15:

1. Teilen Sie die Anwendung basierend auf der Geschäftsdomäne oder Funktionalität in kleinere, unabhängige Teile auf.
2. Erstellen Sie für jedes MicroFrontend eine Angular-Anwendung mit einem eigenen Satz an Komponenten, Diensten und Modulen.
3. Definieren Sie einen API-Vertrag für die Kommunikation zwischen MicroFrontends. Dies können RESTful-APIs, WebSockets oder benutzerdefinierte Ereignisse sein.
4. Verwenden Sie ein Modul-Föderations-Plugin, um MicroFrontends zur Laufzeit dynamisch in die Hauptanwendung zu laden. Modulverbund ist eine Funktion in Webpack, die es mehreren Anwendungen ermöglicht, Code zur Laufzeit gemeinsam zu nutzen.
5. Implementieren Sie ein gemeinsames Modul, das gemeinsamen Code und Komponenten enthält, die von mehreren MicroFrontends verwendet werden können.
6. Verwenden Sie ein zentralisiertes Statusverwaltungssystem wie Redux oder NgRx, um den Anwendungsstatus über MicroFrontends hinweg zu verwalten.
7. Implementieren Sie ein konsistentes UI-Designsystem für alle MicroFrontends, um ein einheitliches Benutzererlebnis zu gewährleisten.

MicroFrontends in Angular mit Module Federation

HOST-Anwendungskonfiguration

1. Erstellen einer Hostanwendung

ng new angular-mfe-example --create-application="false"

2. Host-App erstellen (Hauptanwendung)

In der Hauptanwendung erhalten wir alle Remote-Anwendungen und konfigurieren das Routing für sie.

ng g application host

4. Aktualisieren Sie Route, um den Pfad zum Administrator hinzuzufügen und AppComponent zu ändern

Route zu app-routing.module.ts hinzufügen

Bereinigen Sie app.component.html und fügen Sie den folgenden Code hinzu

5. Führen Sie die Anwendung aus

ng serve host

Erstellen von Remote-Anwendungen und -Konfigurationen

1. Erstellen Sie eine Remote-Anwendung 1 und eine Remote-Anwendung 2

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. Fügen Sie nun das Module Federation Package zu den drei Anwendungen hinzu

ng add @angular-architects/module-federation --project host --port 4200

ng add @angular-architects/module-federation --project remoteapp1 --port 5001

ng add @angular-architects/module-federation --project remoteapp2 --port 5002

6. Stellen Sie nun die Module aus den Remote-Anwendungen für diese offenen webpack.config.js in remoteapp1 und remoteapp2 bereit

7. Fangen Sie die exponierten Module in der Hostanwendung webpack.config.js ab

8.Konfigurieren Sie nun das Routing in der Host-Anwendung app.module.ts

9. Nach dem Konfigurieren der Routen erhalten Sie Fehlermeldungen wie „Modul nicht gefunden“. Sie müssen eine decl.d.ts im Host-App-Ordner erstellen.

10. Wenn dann in remoteapp1 und remoteapp2 die folgende Fehlermeldung angezeigt wird. Fügen Sie dann home.module.ts in tsconfig (Dateien) hinzu.

11. Reservieren Sie nun die Fernbedienungen und ändern Sie den Host app.component.ts wie unten beschrieben

12. Öffnen Sie nun die Host-Anwendung im Browser und testen Sie sie.

Arbeiten……

Repo-Link:https://github.com/GuruNadh552/Micro-Frontends-in-Angular

Vielen Dank, wenn Sie irgendwelche Zweifel haben. Schreiben Sie die Nachricht in die Kommentare