Skip to content

JulioJavif/micro-fronts-angular

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 

Repository files navigation

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.

About

Prueba de concepto para crear un microfront y utilizarlo en un frontend de angular

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors