Qu'est-ce que MicroFrontends ?

MicroFrontends est un style architectural permettant de créer des applications Web en les décomposant en modules plus petits, indépendants et faiblement couplés. Chaque module, ou MicroFrontend, est développé et déployé indépendamment, avec son propre ensemble de dépendances, de technologies et d'équipes.

L'implémentation de MicroFrontend dans Angular 15 implique de décomposer l'application en parties plus petites qui peuvent être développées et déployées indépendamment. Chaque MicroFrontend doit avoir sa propre application Angular, avec son propre ensemble de composants, services et modules.

Étapes clés pour implémenter MicroFrontend dans Angular 15 :

1. Divisez l'application en parties plus petites et indépendantes en fonction du domaine d'activité ou de la fonctionnalité.
2. Créez une application Angular pour chaque MicroFrontend, avec son propre ensemble de composants, services et modules.
3. Définissez un contrat d'API pour la communication entre MicroFrontends. Il peut s'agir d'API RESTful, de WebSockets ou d'événements personnalisés.
4. Utilisez un plug-in de fédération de modules pour charger dynamiquement MicroFrontends dans l'application principale lors de l'exécution. La fédération de modules est une fonctionnalité de Webpack qui permet à plusieurs applications de partager du code lors de l'exécution.
5. Implémentez un module partagé qui contient du code commun et des composants pouvant être utilisés par plusieurs MicroFrontends.
6. Utilisez un système de gestion d'état centralisé, tel que Redux ou NgRx, pour gérer l'état des applications sur les MicroFrontends.
7. Implémentez un système de conception d'interface utilisateur cohérent sur MicroFrontends pour garantir une expérience utilisateur cohérente.

MicroFrontends dans Angular utilisant la fédération de modules

Configuration de l'application HÔTE

1. Création d'une application hôte

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

2. Créer une application hôte (application principale)

C'est l'application principale où nous obtenons toutes les applications distantes et configurons le routage pour elles.

ng g application host

4. Mettez à jour la route pour ajouter le chemin d'accès à l'administrateur et modifiez AppComponent

Ajouter une route à app-routing.module.ts

Nettoyez app.component.html et ajoutez le code ci-dessous

5. Exécutez l'application

ng serve host

Création d'applications et de configurations distantes

1. Créer une application distante 1 et une application distante 2

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. Ajoutez maintenant le package de fédération de modules aux trois applications

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. Exposez maintenant les modules des applications distantes pour ce webpack.config.js ouvert dans remoteapp1 et remoteapp2

7. Attrapez les modules exposés dans l'application hôte webpack.config.js

8.Configurez maintenant le routage dans l'application hôte app.module.ts

9. Après avoir configuré les itinéraires, vous obtenez des erreurs telles que module introuvable. vous devez créer un decl.d.ts dans le dossier de l'application hôte.

10. Ensuite, si vous obtenez l'erreur ci-dessous dans remoteapp1 et remoteapp2 . puis ajoutez le home.module.ts dans tsconfig (fichiers).

11. Réservez maintenant les télécommandes et modifiez l'hôte app.component.ts comme ci-dessous

12. Ouvrez maintenant l'application hôte dans le navigateur et testez-la.

Fonctionnement……

Lien de dépôt :https://github.com/GuruNadh552/Micro-Frontends-in-Angular

Merci si vous avez des doutes. déposer le message en commentaire