Co to jest MicroFrontends?

MicroFrontends to styl architektoniczny służący do budowania aplikacji internetowych poprzez dzielenie ich na mniejsze, niezależne i luźno powiązane moduły. Każdy moduł, czyli MicroFrontend, jest opracowywany i wdrażany niezależnie, z własnym zestawem zależności, technologii i zespołów.

Implementacja MicroFrontend w Angular 15 wymaga podzielenia aplikacji na mniejsze części, które można rozwijać i wdrażać niezależnie. Każdy MicroFrontend powinien mieć własną aplikację Angular z własnym zestawem komponentów, usług i modułów.

Kluczowe kroki do wdrożenia MicroFrontend w Angular 15:

1. Podziel aplikację na mniejsze, niezależne części w oparciu o domenę biznesową lub funkcjonalność.
2. Utwórz aplikację Angular dla każdego MicroFrontend, z własnym zestawem komponentów, usług i modułów.
3. Zdefiniuj kontrakt API do komunikacji między MicroFrontends. Mogą to być RESTful API, WebSockets lub zdarzenia niestandardowe.
4. Użyj wtyczki federacji modułów, aby dynamicznie ładować MicroFrontends do głównej aplikacji w czasie wykonywania. Federacja modułów to funkcja pakietu Webpack, która umożliwia wielu aplikacjom współdzielenie kodu w czasie wykonywania.
5. Zaimplementuj wspólny moduł, który zawiera wspólny kod i komponenty, które mogą być używane przez wiele MicroFrontends.
6. Użyj scentralizowanego systemu zarządzania stanem, takiego jak Redux lub NgRx, aby zarządzać stanem aplikacji w MicroFrontends.
7. Zaimplementuj spójny system projektowania interfejsu użytkownika w MicroFrontends, aby zapewnić spójny interfejs użytkownika.

MicroFrontends w Angular przy użyciu federacji modułów

Konfiguracja aplikacji HOST

1. Tworzenie aplikacji hosta

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

2. Utwórz aplikację hosta (aplikacja główna)

Jest to aplikacja główna, z której pobieramy wszystkie aplikacje zdalne i konfigurujemy dla nich routing.

ng g application host

4. Zaktualizuj trasę, aby dodać ścieżkę do administratora i zmienić AppComponent

Dodaj trasę do app-routing.module.ts

Wyczyść app.component.html i dodaj poniższy kod

5. Uruchom aplikację

ng serve host

Tworzenie zdalnych aplikacji i konfiguracji

1. Utwórz zdalną aplikację 1 i zdalną aplikację 2

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. Teraz dodanie pakietu federacyjnego modułów do trzech aplikacji

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. Teraz udostępnij moduły z Remote Applications dla tego otwartego webpack.config.js w remoteapp1 i remoteapp2

7. Złap moduły Exposed w aplikacji hosta webpack.config.js

8. Teraz skonfiguruj routing w aplikacji hosta app.module.ts

9. Po skonfigurowaniu tras pojawiają się błędy typu nie znaleziono modułu. musisz utworzyć plik decl.d.ts w folderze aplikacji hosta.

10. Następnie, jeśli pojawi się poniższy błąd w remoteapp1 i remoteapp2 . następnie dodaj home.module.ts w tsconfig (pliki).

11. Teraz zarezerwuj piloty i zmodyfikuj host app.component.ts jak poniżej

12. Teraz otwórz aplikację hosta w przeglądarce i przetestuj ją.

Pracujący……

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

Dziękuję, jeśli masz jakiekolwiek wątpliwości. upuść wiadomość w komentarzach