https://github.com/juliojavif/micro-fronts-angular
Prueba de concepto para crear un microfront y utilizarlo en un frontend de angular
https://github.com/juliojavif/micro-fronts-angular
angular microfrontend module-federation webpack
Last synced: about 2 months ago
JSON representation
Prueba de concepto para crear un microfront y utilizarlo en un frontend de angular
- Host: GitHub
- URL: https://github.com/juliojavif/micro-fronts-angular
- Owner: JulioJavif
- Created: 2024-12-08T22:48:49.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-08T23:36:57.000Z (over 1 year ago)
- Last Synced: 2025-04-05T18:52:29.493Z (over 1 year ago)
- Topics: angular, microfrontend, module-federation, webpack
- Language: HTML
- Homepage:
- Size: 119 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## 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](https://github.com/jimyhdolores/demo-microfrontend-multirepo-angular-modulefederation)
Luego configurar en _tsconfig.app.json_ en el atributo `files` la ruta del módulo que se va a exponer, por ejemplo:
```json
{
"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_
```javascript
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.