Este proyecto se usa la version 14.2.6 de Angular

Para esta demostración se usa un multi project de Angular, primero debes crear un espacio de trabajo, en este caso se llama "demo-microfront-angular14"

ng new demo-microfront-angular14 --create-application=false

Luego crearemos los siguientes proyectos:

Este proyecto sera nuestro contenedor de microfrontend

ng generate application mf-shell --style=scss --routing=true

ng generate application mf-payment --style=scss

ng generate application mf-shopping --style=scss --routing=true

Este proyecto sera de tipo librería el cual usaremos para compartir elementos entre los microfrontend

ng generate library  commons-lib

El paquete @angular-architects/module-federation proporciona un generador personalizado. Si deseas aprender más de esta librería y arquitectura Angular visita el siguiente link: https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-module-federation-in-webpack-5/

npm i -D @angular-architects/module-federation

Una vez instalada la librería agregaremos el uso de Module Federation a nuestros MF (microfrontends) y agregaremos unas configuraciones:

ng add @angular-architects/module-federation --project mf-shell --port 4200 --type host
ng add @angular-architects/module-federation --project mf-shopping --port 4201 --type remote
ng add @angular-architects/module-federation --project mf-payment --port 4202 --type remote

Listo, lo que hara este comando es crear unos archivos webpack.config.js en cada uno de nuestros MF para poder hacer uso de la federación de modulos.

Luego solo es cuestion de configurar los MF "remotos" y el "host"

Ejemplo de configuración para el MF shopping:

const {
  shareAll,
  withModuleFederationPlugin,
} = require("@angular-architects/module-federation/webpack");

module.exports = withModuleFederationPlugin({
  name: "mfShopping",
  exposes: {
    "./ProductsModule":
      "./projects/mf-shopping/src/app/products/products.module.ts",
  },

  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
    }),
  },
  sharedMappings: ["@commons-lib"],
});

Para realizar esto usaremos la librería npm-run-all

npm i -D npm-run-all

Una vez instalada agregamos lo siguientes scripts en nuestro archivo package.json:

    "mf-shell": "ng s mf-shell",
    "mf-shopping": "ng s mf-shopping",
    "mf-payment": "ng s mf-payment",
    "all": "npm-run-all --parallel mf-shell mf-shopping mf-payment"

Ahora solo queda ejecutar el comando npm run all

Suscríbete a mi canal 😎

https://www.youtube.com/c/LogiDev

Sígueme en mis redes:

👉Facebook : https://facebook.com/LogiDev25 búscame como: @LogiDev25

👉Instagram: https://instagram.com/jimyhdolores/ búscame como: @jimyhdolores

👉Twitter: https://twitter.com/jimyHDolores búscame como: @jimyHDolores

👉LinkedIn:https://linkedin.com/in/jimyhuachodolores/