Wiki

Has cargado una revisión vieja del documento! Si la guardas crearás una versión nueva con estos datos.

====== 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>

// 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>

Resumen de la edición

Wiki

Herramientas de usuario

Herramientas del sitio

Herramientas de la página