====== 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
  ng g @angular-architects/module-federation:init --project remote --port 4201 --type remote
</code>

 **Nota:** asegurarse que el flag --project sea el nombre del angular.json

===== En host-app =====

<code>
  ng g @angular-architects/native-federation:init --project host-app --port 4200 --type dynamic-host
</code>

===== Modificaciones al codigo. =====

 **En cada Microfront**
  
 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 =====

 Exponiendo modulo raiz de la aplicacion en **webpack.config**

 en este caso exponemos **entry.module.ts** y un **HeaderInterceptor** que se inyectará 
 en la raiz del **Host**
 
 **webpack.config.js**

<code>
 const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

 module.exports = withModuleFederationPlugin({
   name: 'mfcajamenor',

   exposes: {
    './Routes': './src/app/entry/entry.module.ts',
    './HeaderInterceptor': './src/app/core/interceptor/header.interceptor.ts'
   },

   shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
   },

 });
</code>

 Ejemplo Carga remota desde el **app.routes** del Host

 **.app.routes.ts**

<code>

 import { Routes } from '@angular/router';
 import { loadRemoteModule } from '@angular-architects/module-federation';
 import { environment } from '../environments/environment';

 export const routes: Routes = [
  {
    path: 'cajas-menores',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfcajas_menores_url}/remoteEntry.js`,
        exposedModule: './Routes'
      }).then(m => m.EntryModule)
  },
  {
    path: 'centro-costos',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: `${environment.mfcentro_costos_url}/remoteEntry.js`,
        exposedModule: './Routes'
      }).then(m => m.EntryModule)
    }
  ];
  
</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]]