https://github.com/potier97/angular-microfront
Primer test de angular con Microfronts y Module Federation
https://github.com/potier97/angular-microfront
angular microfrontend module-federation webpack
Last synced: about 2 months ago
JSON representation
Primer test de angular con Microfronts y Module Federation
- Host: GitHub
- URL: https://github.com/potier97/angular-microfront
- Owner: potier97
- Created: 2023-04-24T12:58:24.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-12-17T16:44:58.000Z (over 2 years ago)
- Last Synced: 2025-01-18T16:50:09.677Z (over 1 year ago)
- Topics: angular, microfrontend, module-federation, webpack
- Language: TypeScript
- Homepage: https://angular-microfront.vercel.app
- Size: 668 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NpaMicroFrontMofe
## Creación del Proyecto
Se crea el esqueleto de la app
[Basado en](https://www.youtube.com/watch?v=12x2QpDCsfk&ab_channel=LogiDev)
```
ng new npa-micro-front-mofe --create-application=false
```
## Creación del Host
Conocido como el "CONTENDEDOR" del sitio, normalmente se declara como shell, se configurar las opciones basicas como el routing y los estilos del sitio
```
ng generate application mf-shell --style=scss --routing=true
```
## Creación de un Microfront
Contenido de la aplicación, normalmente se crea sin hoja de rutas, se configurar unicamente con los estilos del sitio
```
ng generate application mf-payments --style=scss --routing=false
ng generate application mf-shopping --style=scss --routing=false
```
## Creación de una Lubreria
Aplicación con la libreria de la aplicación, para compartir los componentes y servicios unicos del sitio
```
ng generate library commons-lib
```
## Instalación libreriaModule Federation
Libreria para control de la federación de los modulos
```
npm i -D @angular-architects/module-federation
```
## Agregar la herramienta a cada Modulo
Se configura los projects en los que ejecutan componentes o shell de Angular
Se configura para el Shell
- Project -> Nombre del micro
- Port -> Puerto en el que corre
- Type host -> Siempre seran host para la shells
```
ng add @angular-architects/module-federation --project mf-shell --port 4200 --type host
```
Configuración Microfronends
Se debe tener en cuenta:
- Project -> Nombre del micro
- Port -> Puerto en el que corre
- Type remote -> Siempre seran remote para los micros
```
ng add @angular-architects/module-federation --project mf-payments --port 4208 --type remote
ng add @angular-architects/module-federation --project mf-shopping --port 4210 --type remote
```
Posterior a la modificación de los microfront con el CLI se hace la configuración del shell en el webcongif para configurar los puertos definidos
## Generar Modulos dentro de los MF
Se ejecutan los comandos normalmente como se hace en cualquier proyecto de angular, pero se incluye el nombre del proyecto
```
ng generate module products --project mf-shopping
```
## Generar Archivo de Rutas dentro de los MF
Se ejecutan los comandos normalmente como se hace en cualquier proyecto de angular, pero se incluye el nombre del proyecto
```
ng generate module app-routing --flat --module=app --project mf-shopping
```
## Generar Archivo de Componentes dentro de los MF
Se ejecutan los comandos normalmente como se hace en cualquier proyecto de angular, además se le indica el nombre del micro y el nombre del modulo
```
ng generate component products --module=products --project mf-shopping
```
Componentes anidados
```
ng generate component products --module=products --project mf-shopping
```
---------------------------------------------------------------------
## Commons Lib
Se debe tratar como una dependencia más del proyecto, por ende se debe de compilar previamente, es la unica que tiene un package.json adicional, por lo tanto si se comparten las mismas dependencias con el proyecto general y la libreria, se debe´ra de instalar la misma versión.
Se configura el alias del tsconfig para hacer referencia a esta y poder ser llamada desde los micros
Se debe de configurar cada Micro para que acepte las configuraciones de los alias
