Bueno en primer lugar en este tutorial utilizaremos la librería, module federation apoyandonos de esto https://www.npmjs.com/package/@angular-architects/module-federation
Tu puedes utilizar la forma habitual para la creación de workspace de las siguiente forma
ng new workspace --createApplication=false
Luego dentro del workspace, crea el proyecto contenedor de los demás es conocido como el shell o el host
ng generate application host --style=scss --routing=true
Dentro del workspace, se puede crear el mf con el mismo comando del anterior
ng generate application mf-name --style=scss --routing=true
Como te mencioné al comienzo, emplearemos una librería que nos ayudará con este fin 👾
Primero el host 💻
ng add @angular-architects/module-federation --project host --port xxxx
Luego el mf-name ⚛️
ng add @angular-architects/module-federation --project mf-name --port nnnn
En el mf debes configurar los temas relacionados al webpack y a la exposición de módulos
Debes configurar el nombre del microfrontend y los módulos a exponer:
library: { type: "module" },
name: "mf-name",
filename: "remoteEntry.js",
exposes: {
'./NameModule': './projects/mf/src/app/NameFolderMoule/NameModule.module.ts',
},
...
Ten cuidado ☢️
shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
rxjs: {
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
includeSecondaries: true,
},
...
De forma que exponga los módulos deseados ante los endpoints esperados sean expuestos
const routes: Routes = [
{
path:'',
component: ShowmfComponent,
},
{
path: 'mf',
loadChildren: () =>
import("./NameFolderMoule/NameModule.module").then((m) => m.NameModule),
},
];
En el host debes configurar los temas relacionados al webpack y a la captura de los módulos externos
Debes configurar el nombre del microfrontend que leeras y su ruta de exposición:
...
remotes: {
mf-name: "http://localhost:nnnn/remoteEntry.js",
},
...
Ten cuidado ☢️
shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
rxjs: {
singleton: true,
strictVersion: true,
requiredVersion: 'auto',
includeSecondaries: true,
},
De forma que obtenga los elementos expuestos
const routes: Routes = [
{
path:'', component: HomeComponent, pathMatch: 'full'
},
{
path: 'mf-name',
loadChildren: () =>
import('mf-name/NameModule').then((m) => m.NameModule),
}
];
Esto detonará un error pues no existe el módulo por lo tanto en la ruta raiz es decir en host/src/app debes crear el archivo decl.d.ts para que el compilador pueda resolverlo de buena forma. Ahora dentro del archivo pones la siguiente linea:
declare module 'mf/ShowinfoModule'