Genera il progetto principale:
ng new shell-app --routing --style=scss
Aggiungi il supporto Module Federation:
ng add @angular-architects/module-federation --type host --port 4200
Esempio di configurazione webpack.config.js:
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "http://localhost:4200/",
uniqueName: "shell"
},
optimization: {
runtimeChunk: false
},
plugins: [
new ModuleFederationPlugin({
name: "shell",
remotes: {
mfeProduct: "mfeProduct@http://localhost:4201/remoteEntry.js",
mfeProfile: "mfeProfile@http://localhost:4202/remoteEntry.js"
},
shared: {
"@angular/core": { singleton: true, strictVersion: true },
"@angular/common": { singleton: true, strictVersion: true },
"@angular/router": { singleton: true, strictVersion: true }
}
})
]
};
Genera un’app remota:
ng new mfe-product --routing --style=scss
Configura webpack.config.js:
new ModuleFederationPlugin({
name: "mfeProduct",
filename: "remoteEntry.js",
exposes: {
"./ProductModule": "./src/app/product/product.module.ts"
},
shared: {
"@angular/core": { singleton: true, strictVersion: true },
"@angular/common": { singleton: true, strictVersion: true }
}
});
Step 3: Caricamento Dinamico (Runtime Integration)
Usa il helper loadRemoteModule:
import { loadRemoteModule } from '@angular-architects/module-federation';
export const routes: Routes = [
{
path: 'product',
loadChildren: () =>
loadRemoteModule({
remoteEntry: 'http://localhost:4201/remoteEntry.js',
remoteName: 'mfeProduct',
exposedModule: './ProductModule'
}).then(m => m.ProductModule)
}
];
Best Practice
- Standalone Components: Angular 19 supporta componenti standalone, riducendo la complessità dei moduli.
-
Shared Dependencies: Usa
singleton: trueper Angular core/common/router. -
Errori comuni: Evita di condividere Angular come
peerDependency(può causare NG0200 Circular DI). - Nx Monorepo: Per team grandi, Nx semplifica la gestione di più MFE con caching e generators.
Conclusione
Con Angular 19 e Module Federation puoi creare architetture scalabili, modulari e indipendenti. Questo setup permette:
- Deploy indipendenti.
- Aggiornamenti rapidi.
- Riduzione dei conflitti tra team.
