Cos'è MicroFrontend?

MicroFrontends è uno stile architettonico per la creazione di applicazioni web suddividendole in moduli più piccoli, indipendenti e debolmente accoppiati. Ogni modulo, o MicroFrontend, viene sviluppato e distribuito in modo indipendente, con il proprio set di dipendenze, tecnologie e team.

L'implementazione di MicroFrontend in Angular 15 comporta la suddivisione dell'applicazione in parti più piccole che possono essere sviluppate e distribuite in modo indipendente. Ogni MicroFrontend dovrebbe avere la propria applicazione Angular, con il proprio set di componenti, servizi e moduli.

Passaggi chiave per l'implementazione di MicroFrontend in Angular 15:

1. Suddividi l'applicazione in parti più piccole e indipendenti in base al dominio aziendale o alla funzionalità.
2. Crea un'applicazione Angular per ogni MicroFrontend, con il proprio set di componenti, servizi e moduli.
3. Definire un contratto API per la comunicazione tra MicroFrontend. Potrebbe trattarsi di API RESTful, WebSocket o eventi personalizzati.
4. Utilizza un plug-in di federazione dei moduli per caricare dinamicamente MicroFrontend nell'applicazione principale in fase di esecuzione. La federazione dei moduli è una funzionalità di Webpack che consente a più applicazioni di condividere il codice in fase di esecuzione.
5. Implementa un modulo condiviso che contiene codice e componenti comuni che possono essere utilizzati da più MicroFrontend.
6. Utilizza un sistema di gestione dello stato centralizzato, come Redux o NgRx, per gestire lo stato dell'applicazione su MicroFrontend.
7. Implementa un sistema di progettazione dell'interfaccia utente coerente su MicroFrontends per garantire un'esperienza utente coerente.

MicroFrontend in Angular utilizzando la Federazione dei moduli

Configurazione dell'applicazione HOST

1. Creazione di un'applicazione host

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

2. Creare un'app host (applicazione principale)

È l'applicazione principale in cui otteniamo tutte le applicazioni remote e configuriamo il routing per loro.

ng g application host

4. Aggiorna Route per aggiungere il percorso ad admin e modificare AppComponent

Aggiungi percorso a app-routing.module.ts

Pulisci app.component.html e aggiungi il codice sottostante

5. Eseguire l'applicazione

ng serve host

Creazione di applicazioni e configurazioni remote

1. Creare un'applicazione remota 1 e un'applicazione remota 2

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. Aggiungere ora il pacchetto di federazione del modulo alle tre applicazioni

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. Ora esponi i moduli dalle applicazioni remote per quel webpack.config.js aperto in remoteapp1 e remoteapp2

7. Cattura i moduli esposti nell'applicazione host webpack.config.js

8.Ora configurare il routing nell'applicazione host app.module.ts

9. Dopo aver configurato i percorsi, ricevi errori come modulo non trovato. è necessario creare un decl.d.ts nella cartella dell'app host.

10. Quindi, se ricevi l'errore seguente in remoteapp1 e remoteapp2 . quindi aggiungi home.module.ts in tsconfig (file).

11. Ora prenota i telecomandi e modifica l'host app.component.ts come di seguito

12. Ora apri l'applicazione host nel browser e provala.

Lavorando……

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

Grazie se hai qualche dubbio. lascia il messaggio nei commenti