Diferencias

Muestra las diferencias entre dos versiones de la página.

--- ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-microfrontend [2025/01/30 15:27]
192.168.175.214 [En host-app]
+++ ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-microfrontend [2025/03/06 16:40] (actual)
192.168.175.219
@@ Línea 1: / Línea 1: @@
-====== Microfrontends Module federation. ======
+====== Microfrontends Webpack (Module federation). ======
 ===== Configuraciones =====
 **Comandos**
+Primeramente se ejecutan los siguientes comandos
 ===== En cada Microfront =====
 <code>
   npm i @angular-architects/module-federation@18.0.6
+</code>
+<code>
   ng g @angular-architects/module-federation:init --project remote --port 4201 --type remote
 </code>
@@ Línea 21: / Línea 29: @@
 ===== Modificaciones al codigo. =====
-En cada Microfront
+ **En cada Microfront**
- Crear **entry/entry.module** con las importaciones raices y **entry/entry-routing.module** y exponer el modulo en el webpack.config
+ Crear un modulo **entry/entry.module** con las importaciones raices y un routing **entry/entry-routing.module**
  **Nota**: ver proyecto de referencia: (mfcajasMenores) es el primero que se configuro como microfrontend
- Forma de exponer Microfrontends
+ ===== Forma de exponer Microfrontends =====
  Exponiendo modulo raiz de la aplicacion en **webpack.config**
@@ Línea 48: / Línea 56: @@
    shared: {
-    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+    ...shareAll({ singleton: true, strictVersion: false, requiredVersion: 'auto' }),
    },
@@ Línea 87: / Línea 95: @@
 </code>
+ **Modificacion en la navegacion de los microfrontends**
+ Anteponer el nombre del microfrontend en todos los enlaces para que pueda ser tomado por el HOST
+ * router.navigate Asi siendo **"caja-menores/"** el nombre con el que se llamo el microfront en el path de app.routes.ts desde el HOST
+<code>
+  this._router.navigate([`/cajas-menores/gastos`]);
+</code>
+**Se debe cargar el headerInterceptor en el app.config.ts del HOST**
+<code>
+const loadInterceptor = async () => {
+  const headersInterceptor = await loadRemoteModule({
+    type: 'module',
+    remoteEntry: `${environment.mfcajas_menores_url}/remoteEntry.js`,
+    exposedModule: './HeaderInterceptor'
+  }).then(m => m.headersInterceptor);
+  return headersInterceptor;
+};
+// Creamos un interceptor que delegará al interceptor remoto una vez que esté cargado
+const delegatingInterceptor: HttpInterceptorFn = (req, next) => {
+  return new Observable(subscriber => {
+    loadInterceptor().then(remoteInterceptor => {
+      remoteInterceptor(req, next).subscribe(subscriber);
+    });
+  });
+};
+</code>
+ **inyectar la funcion arriba ilustrada "delegatingInterceptor()" de tipo HttpInterceptorFn asi:**
+<code>
+  provideHttpClient(
+    withInterceptors([delegatingInterceptor])
+  )
+</code>
+[[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]]

Wiki

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página