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:45]
192.168.175.214 [En cada Microfront]
+++ 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). ======
@@ Línea 6: / Línea 6: @@
 **Comandos**
-===== En cada Microfront =====
 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 53: / Línea 56: @@
    shared: {
-    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+    ...shareAll({ singleton: true, strictVersion: false, requiredVersion: 'auto' }),
    },
@@ Línea 92: / 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