alexvijo · May 21, 2024 08:23 · May 21, 2024 · May 17, 2024 · May 17, 2024 · May 17, 2024
diff --git a/Arquitectura microservicios angular federation.md b/Arquitectura microservicios angular federation.md
@@ -35,16 +35,14 @@ A continuación, se presenta un ejemplo de la estructura del árbol de ficheros
 | | -- bootstrap.ts
 | |-- webpack.config.js
 | |-- webpack.prod.config.js
-| `-- angular.json
+|-- angular.json
 ```
 
 
 ### Configuración de Module Federation
 #### Configuración del Host
-
-En el archivo `webpack.config.js` del host, se define la configuración de Module Federation para consumir los microfrontends.
-
 ```javascript
+// webpack.config.js
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 
 module.exports = {
@@ -61,12 +59,11 @@ module.exports = {
   ],
 };
 ```
+#### Configuración de un Microfrontend
 
-Configuración de un Microfrontend
-En el archivo webpack.config.js de cada microfrontend, se define cómo se expondrán los módulos.
-
-Microfrontend 1
+**Microfrontend 1**
 ```typescript
+// webpack.config.js
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 
 module.exports = {
@@ -84,8 +81,9 @@ module.exports = {
 };
 ```
 
-Microfrontend 2
+**Microfrontend 2**
 ```javascript
+// webpack.config.js
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 
 module.exports = {
@@ -103,11 +101,10 @@ module.exports = {
 };
 ```
 
-Configuración Angular
-Host
-En el app.module.ts del host, se debe cargar dinámicamente los módulos remotos.
-
+#### Configuración Angular
+**Host**
 ```typescript
+// app.module.ts
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
@@ -137,11 +134,9 @@ import { AppComponent } from './app.component';
 export class AppModule {}
 ```
 
-Microfrontends
-Para los microfrontends, se define el módulo correspondiente.
-
-mf1.module.ts
+**Microfrontends**
 ```typescript
+// mf1.module.ts
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
@@ -162,8 +157,8 @@ import { Mf1Component } from './mf1.component';
 export class Mf1Module {}
 ```
 
-mf2.module.ts
 ```typescript
+// mf2.module.ts
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
@@ -183,24 +178,22 @@ import { Mf2Component } from './mf2.component';
 })
 export class Mf2Module {}
 ```
-Tipo de Repositorios
+
+#### Tipo de Repositorios
 En una arquitectura de microfrontends, se pueden utilizar diferentes tipos de repositorios:
 
-Monorepo: Un único repositorio que contiene el código del host y todos los microfrontends.
+**1. Monorepo**: Un único repositorio que contiene el código del host y todos los microfrontends.
 Ventajas: fácil coordinación entre equipos, configuración compartida.
 
-Multirepo: Repositorios separados para el host y cada microfrontend.
+**2. Multirepo**: Repositorios separados para el host y cada microfrontend.
 Ventajas: mayor independencia, facilita la gestión de permisos y la escalabilidad del equipo.
 
-La elección entre monorepo y multirepo depende de varios factores, como la estructura del equipo, las prácticas de desarrollo y las preferencias organizacionales.
-
-Despliegue y Ejecución
-Desarrollo Local
+#### Despliegue y Ejecución
+**Desarrollo Local**
 Para ejecutar la configuración localmente, primero necesitas arrancar cada aplicación de microfrontend y luego el host. Supongamos que utilizamos scripts de npm para arrancar cada aplicación.
 
-Microfrontend 1
+**Microfrontend 1**
 En el package.json de microfrontend1, añadimos un script para arrancar la aplicación:
-
 ```json
 {
   "scripts": {
@@ -209,15 +202,14 @@ En el package.json de microfrontend1, añadimos un script para arrancar la aplic
 }
 ```
 Luego, en la terminal, ejecutamos:
-
 ```bash
 cd microfrontend1
 npm install
 npm run start
 ```
-Microfrontend 2
-En el package.json de microfrontend2, añadimos un script para arrancar la aplicación:
 
+**Microfrontend 2**
+En el package.json de microfrontend2, añadimos un script para arrancar la aplicación:
 ```json
 {
   "scripts": {
@@ -226,53 +218,49 @@ En el package.json de microfrontend2, añadimos un script para arrancar la aplic
 }
 ```
 Luego, en la terminal, ejecutamos:
-
 ```bash
 cd microfrontend2
 npm install
 npm run start
 ```
-Host
-Finalmente, en el package.json del host-app, añadimos un script para arrancar la aplicación:
 
-``json
+**Host**
+Finalmente, en el package.json del host-app, añadimos un script para arrancar la aplicación:
+```json
 {
   "scripts": {
     "start": "ng serve --port 3000"
   }
 }
-``
+```
 Luego, en la terminal, ejecutamos:
-
 ```bash
 cd host-app
 npm install
 npm run start
 ```
 
-Despliegue a Producción
+#### Despliegue a Producción
 Para desplegar las aplicaciones en producción, necesitas construir cada microfrontend y el host, y luego alojar los archivos construidos en un servidor web.
 
-Construcción de Microfrontends
+**Construcción de Microfrontends**
 Para construir cada microfrontend, puedes utilizar el siguiente comando:
-
 ```bash
 ng build --prod
 ```
 Esto generará los archivos construidos en el directorio dist. Asegúrate de configurar el outputPath en angular.json para especificar el directorio de salida.
 
-Construcción del Host
+**Construcción del Host**
 De manera similar, para el host:
-
 ```bash
 ng build --prod
 ```
-Servir los Archivos Construidos
+
+**Servir los Archivos Construidos**
 Puedes servir los archivos construidos utilizando cualquier servidor web estático, como Nginx, Apache, o incluso servicios de hosting como Firebase Hosting, AWS S3, o Netlify.
 
 Ejemplo de Configuración de Nginx
 Aquí tienes un ejemplo de configuración de Nginx para servir las aplicaciones:
-
 ```nginx
 server {
     listen 80;
@@ -295,12 +283,14 @@ server {
     }
 }
 ```
-Comunicación entre Microfrontends
+
+#### Comunicación entre Microfrontends
 Para la comunicación entre microfrontends, puedes utilizar diferentes enfoques:
 
-Servicios Compartidos: Crear servicios compartidos que utilicen observables para emitir y escuchar eventos.
+**Servicios Compartidos**: Crear servicios compartidos que utilicen observables para emitir y escuchar eventos.
 Event Bus: Implementar un Event Bus que permita la comunicación basada en eventos entre los microfrontends.
 Local Storage o Session Storage: Utilizar el almacenamiento local del navegador para compartir datos entre microfrontends.
+
 Ejemplo de Servicio Compartido
 Un ejemplo simple de un servicio compartido podría ser:
 
@@ -323,7 +313,7 @@ export class SharedService {
   }
 }
 ```
-Uso en Microfrontend 1
+**Uso en Microfrontend 1**
 ```typescript
 import { Component } from '@angular/core';
 import { SharedService } from './shared.service';
@@ -340,7 +330,7 @@ export class Mf1Component {
   }
 }
 ```
-Uso en Microfrontend 2
+**Uso en Microfrontend 2**
 ```typescript
 import { Component, OnInit } from '@angular/core';
 import { SharedService } from './shared.service';

diff --git a/Arquitectura microservicios angular federation.md b/Arquitectura microservicios angular federation.md
@@ -1,9 +1,8 @@
 ### ARQUITECTURA DE MICROFRONTENDS CON ANGULAR Y MODULE FEDERATION
-#### Introducción
+### Introducción
 La arquitectura de microfrontends permite dividir una aplicación web monolítica en aplicaciones más pequeñas y manejables, cada una de las cuales puede ser desarrollada y desplegada de manera independiente. Angular, combinado con Module Federation de Webpack 5, facilita la implementación de microfrontends, permitiendo el intercambio dinámico de módulos entre diferentes aplicaciones.
 
-#### Estructura del Árbol de Ficheros
-
+### Estructura del Árbol de Ficheros
 A continuación, se presenta un ejemplo de la estructura del árbol de ficheros para un proyecto de microfrontends con Angular y Module Federation. Este ejemplo incluye una aplicación host y dos microfrontends.
 ```bash
 /microfrontends-project
@@ -40,8 +39,7 @@ A continuación, se presenta un ejemplo de la estructura del árbol de ficheros
 ```
 
 
-#### Configuración de Module Federation
-
+### Configuración de Module Federation
 #### Configuración del Host
 
 En el archivo `webpack.config.js` del host, se define la configuración de Module Federation para consumir los microfrontends.
@@ -62,11 +60,13 @@ module.exports = {
     }),
   ],
 };
+```
+
 Configuración de un Microfrontend
 En el archivo webpack.config.js de cada microfrontend, se define cómo se expondrán los módulos.
 
 Microfrontend 1
-
+```typescript
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 
 module.exports = {

diff --git a/Arquitectura microservicios angular federation.md b/Arquitectura microservicios angular federation.md
@@ -164,7 +164,6 @@ export class Mf1Module {}
 
 mf2.module.ts
 ```typescript
-Copiar código
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';

diff --git a/Arquitectura microservicios angular federation.md b/Arquitectura microservicios angular federation.md
@@ -0,0 +1,364 @@
+### ARQUITECTURA DE MICROFRONTENDS CON ANGULAR Y MODULE FEDERATION
+#### Introducción
+La arquitectura de microfrontends permite dividir una aplicación web monolítica en aplicaciones más pequeñas y manejables, cada una de las cuales puede ser desarrollada y desplegada de manera independiente. Angular, combinado con Module Federation de Webpack 5, facilita la implementación de microfrontends, permitiendo el intercambio dinámico de módulos entre diferentes aplicaciones.
+
+#### Estructura del Árbol de Ficheros
+
+A continuación, se presenta un ejemplo de la estructura del árbol de ficheros para un proyecto de microfrontends con Angular y Module Federation. Este ejemplo incluye una aplicación host y dos microfrontends.
+```bash
+/microfrontends-project
+|-- /host-app
+| |-- /src
+| | |-- /app
+| | | |-- app.module.ts
+| | | |-- app.component.ts
+| | | -- app.component.html
+| | -- bootstrap.ts
+| |-- webpack.config.js
+| |-- webpack.prod.config.js
+| -- angular.json
+|-- /microfrontend1
+| |-- /src
+| | |-- /app
+| | | |-- mf1.module.ts
+| | | |-- mf1.component.ts
+| | | -- mf1.component.html
+| | -- bootstrap.ts
+| |-- webpack.config.js
+| |-- webpack.prod.config.js
+| -- angular.json
+|-- /microfrontend2
+| |-- /src
+| | |-- /app
+| | | |-- mf2.module.ts
+| | | |-- mf2.component.ts
+| | | -- mf2.component.html
+| | -- bootstrap.ts
+| |-- webpack.config.js
+| |-- webpack.prod.config.js
+| `-- angular.json
+```
+
+
+#### Configuración de Module Federation
+
+#### Configuración del Host
+
+En el archivo `webpack.config.js` del host, se define la configuración de Module Federation para consumir los microfrontends.
+
+```javascript
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+
+module.exports = {
+  // ... otras configuraciones
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "host",
+      remotes: {
+        mf1: "mf1@http://localhost:3001/remoteEntry.js",
+        mf2: "mf2@http://localhost:3002/remoteEntry.js",
+      },
+      shared: ["@angular/core", "@angular/common", "@angular/router"],
+    }),
+  ],
+};
+Configuración de un Microfrontend
+En el archivo webpack.config.js de cada microfrontend, se define cómo se expondrán los módulos.
+
+Microfrontend 1
+
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+
+module.exports = {
+  // ... otras configuraciones
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "mf1",
+      filename: "remoteEntry.js",
+      exposes: {
+        './Module': './src/app/mf1.module.ts',
+      },
+      shared: ["@angular/core", "@angular/common", "@angular/router"],
+    }),
+  ],
+};
+```
+
+Microfrontend 2
+```javascript
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+
+module.exports = {
+  // ... otras configuraciones
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "mf2",
+      filename: "remoteEntry.js",
+      exposes: {
+        './Module': './src/app/mf2.module.ts',
+      },
+      shared: ["@angular/core", "@angular/common", "@angular/router"],
+    }),
+  ],
+};
+```
+
+Configuración Angular
+Host
+En el app.module.ts del host, se debe cargar dinámicamente los módulos remotos.
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot([
+      {
+        path: 'mf1',
+        loadChildren: () =>
+          import('mf1/Module').then((m) => m.Mf1Module),
+      },
+      {
+        path: 'mf2',
+        loadChildren: () =>
+          import('mf2/Module').then((m) => m.Mf2Module),
+      },
+    ]),
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+Microfrontends
+Para los microfrontends, se define el módulo correspondiente.
+
+mf1.module.ts
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { Mf1Component } from './mf1.component';
+
+@NgModule({
+  declarations: [Mf1Component],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: Mf1Component,
+      },
+    ]),
+  ],
+})
+export class Mf1Module {}
+```
+
+mf2.module.ts
+```typescript
+Copiar código
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { Mf2Component } from './mf2.component';
+
+@NgModule({
+  declarations: [Mf2Component],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: Mf2Component,
+      },
+    ]),
+  ],
+})
+export class Mf2Module {}
+```
+Tipo de Repositorios
+En una arquitectura de microfrontends, se pueden utilizar diferentes tipos de repositorios:
+
+Monorepo: Un único repositorio que contiene el código del host y todos los microfrontends.
+Ventajas: fácil coordinación entre equipos, configuración compartida.
+
+Multirepo: Repositorios separados para el host y cada microfrontend.
+Ventajas: mayor independencia, facilita la gestión de permisos y la escalabilidad del equipo.
+
+La elección entre monorepo y multirepo depende de varios factores, como la estructura del equipo, las prácticas de desarrollo y las preferencias organizacionales.
+
+Despliegue y Ejecución
+Desarrollo Local
+Para ejecutar la configuración localmente, primero necesitas arrancar cada aplicación de microfrontend y luego el host. Supongamos que utilizamos scripts de npm para arrancar cada aplicación.
+
+Microfrontend 1
+En el package.json de microfrontend1, añadimos un script para arrancar la aplicación:
+
+```json
+{
+  "scripts": {
+    "start": "ng serve --port 3001"
+  }
+}
+```
+Luego, en la terminal, ejecutamos:
+
+```bash
+cd microfrontend1
+npm install
+npm run start
+```
+Microfrontend 2
+En el package.json de microfrontend2, añadimos un script para arrancar la aplicación:
+
+```json
+{
+  "scripts": {
+    "start": "ng serve --port 3002"
+  }
+}
+```
+Luego, en la terminal, ejecutamos:
+
+```bash
+cd microfrontend2
+npm install
+npm run start
+```
+Host
+Finalmente, en el package.json del host-app, añadimos un script para arrancar la aplicación:
+
+``json
+{
+  "scripts": {
+    "start": "ng serve --port 3000"
+  }
+}
+``
+Luego, en la terminal, ejecutamos:
+
+```bash
+cd host-app
+npm install
+npm run start
+```
+
+Despliegue a Producción
+Para desplegar las aplicaciones en producción, necesitas construir cada microfrontend y el host, y luego alojar los archivos construidos en un servidor web.
+
+Construcción de Microfrontends
+Para construir cada microfrontend, puedes utilizar el siguiente comando:
+
+```bash
+ng build --prod
+```
+Esto generará los archivos construidos en el directorio dist. Asegúrate de configurar el outputPath en angular.json para especificar el directorio de salida.
+
+Construcción del Host
+De manera similar, para el host:
+
+```bash
+ng build --prod
+```
+Servir los Archivos Construidos
+Puedes servir los archivos construidos utilizando cualquier servidor web estático, como Nginx, Apache, o incluso servicios de hosting como Firebase Hosting, AWS S3, o Netlify.
+
+Ejemplo de Configuración de Nginx
+Aquí tienes un ejemplo de configuración de Nginx para servir las aplicaciones:
+
+```nginx
+server {
+    listen 80;
+
+    server_name your-domain.com;
+
+    location / {
+        root /path/to/host-app/dist;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /mf1/ {
+        alias /path/to/microfrontend1/dist/;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /mf2/ {
+        alias /path/to/microfrontend2/dist/;
+        try_files $uri $uri/ /index.html;
+    }
+}
+```
+Comunicación entre Microfrontends
+Para la comunicación entre microfrontends, puedes utilizar diferentes enfoques:
+
+Servicios Compartidos: Crear servicios compartidos que utilicen observables para emitir y escuchar eventos.
+Event Bus: Implementar un Event Bus que permita la comunicación basada en eventos entre los microfrontends.
+Local Storage o Session Storage: Utilizar el almacenamiento local del navegador para compartir datos entre microfrontends.
+Ejemplo de Servicio Compartido
+Un ejemplo simple de un servicio compartido podría ser:
+
+shared.service.ts
+```typescript
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SharedService {
+  private messageSource = new Subject<string>();
+  currentMessage = this.messageSource.asObservable();
+
+  constructor() {}
+
+  changeMessage(message: string) {
+    this.messageSource.next(message);
+  }
+}
+```
+Uso en Microfrontend 1
+```typescript
+import { Component } from '@angular/core';
+import { SharedService } from './shared.service';
+
+@Component({
+  selector: 'app-mf1',
+  template: `<button (click)="sendMessage()">Send Message</button>`,
+})
+export class Mf1Component {
+  constructor(private sharedService: SharedService) {}
+
+  sendMessage() {
+    this.sharedService.changeMessage('Hello from Microfrontend 1');
+  }
+}
+```
+Uso en Microfrontend 2
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { SharedService } from './shared.service';
+
+@Component({
+  selector: 'app-mf2',
+  template: `<div>{{message}}</div>`,
+})
+export class Mf2Component implements OnInit {
+  message: string;
+
+  constructor(private sharedService: SharedService) {}
+
+  ngOnInit() {
+    this.sharedService.currentMessage.subscribe(
+      message => this.message = message
+    );
+  }
+}
+```