¿Qué es MicroFrontends?

MicroFrontends es un estilo arquitectónico para crear aplicaciones web dividiéndolas en módulos más pequeños, independientes y poco acoplados. Cada módulo, o MicroFrontend, se desarrolla e implementa de forma independiente, con su propio conjunto de dependencias, tecnologías y equipos.

La implementación de MicroFrontend en Angular 15 implica dividir la aplicación en partes más pequeñas que se pueden desarrollar e implementar de forma independiente. Cada MicroFrontend debe tener su propia aplicación Angular, con su propio conjunto de componentes, servicios y módulos.

Pasos clave para implementar MicroFrontend en Angular 15:

1. Divida la aplicación en partes más pequeñas e independientes según el dominio comercial o la funcionalidad.
2. Cree una aplicación Angular para cada MicroFrontend, con su propio conjunto de componentes, servicios y módulos.
3. Defina un contrato de API para la comunicación entre MicroFrontends. Esto podría ser API RESTful, WebSockets o eventos personalizados.
4. Utilice un complemento de federación de módulos para cargar dinámicamente MicroFrontends en la aplicación principal en tiempo de ejecución. La federación de módulos es una característica de Webpack que permite que varias aplicaciones compartan código en tiempo de ejecución.
5. Implemente un módulo compartido que contenga código y componentes comunes que puedan ser utilizados por múltiples MicroFrontends.
6. Utilice un sistema de administración de estado centralizado, como Redux o NgRx, para administrar el estado de la aplicación en MicroFrontends.
7. Implemente un sistema de diseño de interfaz de usuario coherente en MicroFrontends para garantizar una experiencia de usuario cohesiva.

MicroFrontends en Angular usando Module Federation

Configuración de la aplicación HOST

1. Creación de una aplicación de host

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

2. Crear aplicación host (aplicación principal)

Es la aplicación principal donde obtenemos todas las aplicaciones remotas y configuramos el enrutamiento para ellas.

ng g application host

4. Actualice la ruta para agregar la ruta al administrador y cambie AppComponent

Agregar ruta a app-routing.module.ts

Limpie app.component.html y agregue el siguiente código

5. Ejecute la aplicación

ng serve host

Creación de aplicaciones y configuraciones remotas

1. Cree una aplicación remota 1 y una aplicación remota 2

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      

       adding home module and component to remoteapp1
      

      

       adding home module and component to remoteapp2
      

5. Ahora agregando el paquete de federación de módulos a las tres aplicaciones

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. Ahora exponga los módulos de las aplicaciones remotas para abrir webpack.config.js en remoteapp1 y remoteapp2

7. Capture los módulos expuestos en la aplicación host webpack.config.js

8. Ahora configure el enrutamiento en la aplicación host app.module.ts

9. Después de configurar las rutas, obtiene errores como módulo no encontrado. necesita crear un decl.d.ts en la carpeta de la aplicación host.

10. Luego, si obtiene el siguiente error en remoteapp1 y remoteapp2. luego agregue home.module.ts en tsconfig (archivos).

11. Ahora reserve los controles remotos y modifique el host app.component.ts como se muestra a continuación

12. Ahora abra la aplicación host en el navegador y pruébela.

Laboral……

Enlace de repositorio:https://github.com/GuruNadh552/Micro-Frontends-in-Angular

Gracias si tienes alguna duda. dejar el mensaje en los comentarios