I am trying to use ModuleFederationPlugin in an Angular project, I am able to get this working following the documentation available. What I am trying now to is to use chunk grouping configuration, like the example below
module.exports = {
// ...
optimization: {
splitChunks: {
cacheGroups: {
angular: {
name: 'angular',
test: /[\\\/]node_modules[\\\/]@angular[\\\/]/,
chunks: 'all',
priority: 10,
enforce: true,
},
},
},
},
};
Build goes fine and generates chunk files based on the grouping configuration, but when I look at MFE initial chunk, I see it still refers/depends on chunks ignoring the chunk grouping configuration. For example initial chunk of MFE has below code where it has references to chunks and also grouped chunks .
register("@angular/animations/browser", "15.2.5", () => (Promise.all([__webpack_require__.e("angular"), __webpack_require__.e("default-webpack_sharing_consume_default_angular_core_angular_core"), __webpack_require__.e("default-webpack_sharing_consume_default_angular_animations_angular_animations")]).then(() => (() => (__webpack_require__(/*! ./node_modules/@angular/animations/fesm2020/browser.mjs */ 72753))))));
Where as I expect it to be something like below
register("@angular/animations/browser", "15.2.5", () => (Promise.all([__webpack_require__.e("angular")]).then(() => (() => (__webpack_require__(/*! ./node_modules/@angular/animations/fesm2020/browser.mjs */ 72753))))));
I see that disabling 'default' chunk grouping by setting
{
// ...
optimization: {
// ...
splitchunks: {
// ...
cacheGroups: {
default: false,
// ...
}
}
}
};
gives the above expected javascript output, but chunk sharing of module federation doesn't work; required chunks are again loaded from lazy loaded micro front end, though they are loaded from shell.
Is there something I miss ? any reference that I can go through to try a solution ?
Thank you, Rakesh.A