Conexión de frontend con microfront por medio de module federation.

Seguir los pasos encontrados en el siguiente repo hasta el encabezado (Activación de la federación de módulos para proyectos angular): Github

Luego configurar en tsconfig.app.json en el atributo files la ruta del módulo que se va a exponer, por ejemplo:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/app/pages/products/products.module.ts",
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Hay que tener en cuenta que esta ruta es la misma que exponemos en el webpack.config.js

module.exports = withModuleFederationPlugin({
  name: 'test-mf',
  exposes: {
    './ProductsModule': './src/app/pages/products/products.module.ts',
  },
  shared: {
    ...shareAll({ 
      singleton: true, 
      strictVersion: true, 
      requiredVersion: 'auto' 
    }),
  },
});

Eso es todo para crear un microfront desde cero. 🤙

Para ejecutar los dos proyectos de este repo hacer npm i sobre cada uno y ng serve, ambos están ya configurados y se ejecutan sobre los puertos 4200 y 4201.