Wiki

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

====== Microfrontends Module federation. ======

===== Configuraciones =====

**Comandos**

===== En cada Microfront =====

Primeramente se ejecutan los siguientes comandos

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

Resumen de la edición

Wiki

Herramientas de usuario

Herramientas del sitio

Herramientas de la página