When you’re building micro frontend applications with Angular and Webpack 5, dependency sharing becomes critical. Without it, you risk bloated bundles, redundant code, and version conflicts. Module Federation offers built-in tools to help manage this, but knowing how to use them well makes all the difference.<\/p>\n\n\n\n
Module Federation allows dynamic runtime loading of remotes by the host, making it possible for teams to build and deploy features independently.<\/p>\n\n\n\n
Webpack\u2019s ModuleFederationPlugin has a shared property that tells it which libraries should be used by both the host and remote apps. This is helpful in microfrontends because it stops the same library from being loaded more than once on the page. For example, you can make sure Angular or React is shared, so it isn\u2019t duplicated.<\/p>\n\n\n\n
There are several effective strategies for managing shared dependencies in an Angular micro frontend setup. The choice of strategy often depends on the specific requirements of your project, the size of your teams, and your overall architectural goals.<\/p>\n\n\n\n Let’s walk through a practical example of setting up a host (shell) application and a remote micro frontend, sharing Angular dependencies.<\/p>\n\n\n\n Project Setup<\/strong><\/p>\n\n\n\n We’ll create a new Angular workspace with two applications: a shell and a mfe1 (micro frontend).<\/p>\n\n\n\n Next, we’ll add the @angular-architects\/module-federation plugin to both projects.<\/p>\n\n\n\n This command will create webpack.config.js and webpack.prod.config.js files in both projects and update the angular.json to use a custom builder.<\/p>\n\n\n\n In the webpack.config.js of the mfe1 project, we’ll expose a module (e.g., FlightsModule) and define our shared dependencies.<\/p>\n\n\n\n In this configuration:<\/strong><\/p>\n\n\n\n In the webpack.config.js of the shell project, we’ll define the remote and configure the shared dependencies.<\/p>\n\n\n\n Here, the remote object maps the name of our remote (mfe1) to its remote entry file URL.<\/p>\n\n\n\n Now, in the shell application’s routing, we can lazy load the exposed module from mfe1.<\/p>\n\n\n\n The import path mfe1\/Module is a virtual path that Webpack understands thanks to the Module Federation configuration.<\/p>\n\n\n\n Finally, run both the shell and mfe1 applications.<\/p>\n\n\n\n Sharing dependencies the right way can make or break your micro frontend architecture. Whether you go with a blanket approach or prefer granular control with singletons, it\u2019s essential to understand how these configurations affect load times and stability. If your team is moving toward a distributed architecture, now\u2019s a good time to hire Angular developers<\/a> who are well-versed in Module Federation and can help architect this cleanly from the start.<\/p>\n","protected":false},"excerpt":{"rendered":" When you’re building micro frontend applications with Angular and Webpack 5, dependency sharing becomes critical. Without it, you risk bloated bundles, redundant code, and version conflicts. Module Federation offers built-in tools to help manage this, but knowing how to use them well makes all the difference. The Core Concepts: Host and Remote Module Federation allows […]<\/p>\n","protected":false},"author":2,"featured_media":2286,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,3],"tags":[],"class_list":["post-2285","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=2285"}],"version-history":[{"count":2,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2285\/revisions"}],"predecessor-version":[{"id":2289,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2285\/revisions\/2289"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/2286"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=2285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=2285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=2285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Strategy<\/strong><\/td> Description<\/strong><\/td> Pros<\/strong><\/td> Cons<\/strong><\/td><\/tr> Share All<\/strong><\/td> Shares all dependencies from the host with all remotes.<\/td> Easy setup, less config<\/td> Shares too much, bigger bundles<\/td><\/tr> Singleton (Granular)<\/strong><\/td> It shares only key libraries like Angular core as singletons.<\/td> Prevents errors, better performance<\/td> Manual setup, more effort<\/td><\/tr> Strict Versioning<\/strong><\/td> Enforces matching versions for shared packages.<\/td> Stable, catches version issues early<\/td> Can block remotes if versions clash<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Practical Example: A Shell and a Remote Micro Frontend<\/h2>\n\n\n\n
1. Create a new Angular workspace<\/h3>\n\n\n\n
ng new angular-mfe-example --create-application=false\ncd angular-mfe-example<\/code><\/pre>\n\n\n\n2. Generate the shell and remote applications<\/h3>\n\n\n\n
ng g application shell --routing --style=scss\nng g application mfe1 --routing --style=scss<\/code><\/pre>\n\n\n\n3. Adding Module Federation<\/h3>\n\n\n\n
ng add @angular-architects\/module-federation --project=shell --port=5000 --type=host\nng add @angular-architects\/module-federation --project=mfe1 --port=3000 --type=remote<\/code><\/pre>\n\n\n\n4. Configuring the Remote (mfe1)<\/h3>\n\n\n\n
\/\/ mfe1\/webpack.config.js\nconst { shareAll, withModuleFederationPlugin } = require('@angular-architects\/module-federation\/webpack');\n\nmodule.exports = withModuleFederationPlugin({\n\n name: 'mfe1',\n\n exposes: {\n '.\/Module': '.\/projects\/mfe1\/src\/app\/flights\/flights.module.ts',\n },\n\n shared: {\n ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),\n },\n});<\/code><\/pre>\n\n\n\n\n
5. Configuring the Host (shell)<\/h3>\n\n\n\n
\/\/ shell\/webpack.config.js\nconst { shareAll, withModuleFederationPlugin } = require('@angular-architects\/module-federation\/webpack');\n\nmodule.exports = withModuleFederationPlugin({\n\n remotes: {\n \"mfe1\": \"http:\/\/localhost:3000\/remoteEntry.js\",\n },\n\n shared: {\n ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),\n },\n});<\/code><\/pre>\n\n\n\n6. Lazy Loading the Remote Module<\/h3>\n\n\n\n
\/\/ shell\/src\/app\/app-routing.module.ts\nimport { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\n\nconst routes: Routes = [\n {\n path: 'flights',\n loadChildren: () => import('mfe1\/Module').then(m => m.FlightsModule)\n }\n];\n\n@NgModule({\n imports: [RouterModule.forRoot(routes)],\n exports: [RouterModule]\n})\n\nexport class AppRoutingModule { }<\/code><\/pre>\n\n\n\n7. Running the Applications<\/h3>\n\n\n\n
Generated bash\nng serve shell -o\nng serve mfe1```<\/code><\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n