{"id":4334,"date":"2020-09-06T23:25:28","date_gmt":"2020-09-06T21:25:28","guid":{"rendered":"https:\/\/angulararchitects.io\/?p=4334"},"modified":"2024-01-19T15:10:08","modified_gmt":"2024-01-19T14:10:08","slug":"getting-out-of-version-mismatch-hell-with-module-federation","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/getting-out-of-version-mismatch-hell-with-module-federation\/","title":{"rendered":"Getting Out of Version-Mismatch-Hell with Module Federation"},"content":{"rendered":"<div class=\"wp-post-series-box series-module-federation wp-post-series-box--expandable\">\n\t\t\t<input id=\"collapsible-series-module-federation69d06bf5b7877\" class=\"wp-post-series-box__toggle_checkbox\" type=\"checkbox\">\n\t\n\t<label\n\t\tclass=\"wp-post-series-box__label\"\n\t\t\t\t\tfor=\"collapsible-series-module-federation69d06bf5b7877\"\n\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t<p class=\"wp-post-series-box__name wp-post-series-name\">\n\t\t\tThis is post 5 of 10 in the series <em>&ldquo;Module Federation&rdquo;<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t<div class=\"wp-post-series-box__posts\">\n\t\t\t<ol>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/the-microfrontend-revolution-module-federation-in-webpack-5\/\">The Microfrontend Revolution: Module Federation in Webpack 5<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/the-microfrontend-revolution-part-2-module-federation-with-angular\/\">The Microfrontend Revolution: Module Federation with Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/dynamic-module-federation-with-angular\/\">Dynamic Module Federation with Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/dynamic-module-federation-with-angular-2\/\">Building A Plugin-based Workflow Designer With Angular and Module Federation<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><span class=\"wp-post-series-box__current\">Getting Out of Version-Mismatch-Hell with Module Federation<\/span><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/using-module-federation-with-monorepos-and-angular\/\">Using Module Federation with (Nx) Monorepos and Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/pitfalls-with-module-federation-and-angular\/\">Pitfalls with Module Federation and Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/multi-framework-and-version-micro-frontends-with-module-federation-your-4-steps-guide\/\">Multi-Framework and -Version Micro Frontends with Module Federation: Your 4 Steps Guide<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/module-federation-with-angulars-standalone-components\/\">Module Federation with Angular&#8217;s Standalone Components<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/whats-new-in-angular-architects-module-federation-14-3\/\">What&#8217;s New in our Module Federation Plugin 14.3?<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n<style>\n table {\n     margin-top:20px !important;\n     margin-bottom:20px !important;\n     border-collapse: collapse !important;\n     border-style: solid !important;\n     border-color: black !important;\n     border-width: 1px !important;\n     font-size: 18px !important;\n }<\/p>\n<p> table td {\n     border-style: solid !important;\n     border-color: black !important;\n     border-width: 1px !important;\n     font-size: 18px !important;\n     padding: 10px !important;\n }<\/p>\n<p> table th {\n     border-style: solid !important;\n     border-color: black !important;\n     border-width: 1px !important;\n     font-size: 18px !important;\n     font-weight: bold !important;\n     text-align: left !important;\n     padding: 10px !important;\n }\n <\/style>\n<p>Webpack Module Federation makes it easy to load separately compiled code like micro frontends. It even allows us to share libraries among them. This prevents that the same library has to be loaded several times.<\/p>\n<\/p>\n<p>However, there might be situations where several micro frontends and the shell need different versions of a shared library. Also, these versions might not be compatible with each other.<\/p>\n<p>For dealing with such cases, Module Federation provides several options. In this article, I present these options by looking at different scenarios. The <a href=\"https:\/\/github.com\/manfredsteyer\/module_federation_shared_versions\">source code<\/a> for these scenarios can be found in my <a href=\"https:\/\/github.com\/manfredsteyer\/module_federation_shared_versions\">GitHub account<\/a>.<\/p>\n<blockquote>\n<p>Big thanks to <a href=\"https:\/\/twitter.com\/wSokra\">Tobias Koppers<\/a>, founder of webpack, for answering several questions about this topic and for proofreading this article.<\/p>\n<\/blockquote>\n<h2>Example Used Here<\/h2>\n<p>To demonstrate how Module Federation deals with different versions of shared libraries, I use a simple shell application known from the other parts of this article series. It is capable of loading micro frontends into its working area:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/static-all-1-0-0.png\" alt=\"Shell loading microfrontends\" \/><\/p>\n<p>The micro frontend is framed with the red dashed line. <\/p>\n<p>For sharing libraries, both, the shell and the micro frontend use the following setting in their webpack configurations:<\/p>\n<pre><code class=\"language-javascript\">new ModuleFederationPlugin({\n    [...],\n    shared: [&quot;rxjs&quot;, &quot;useless-lib&quot;]\n })<\/code><\/pre>\n<p>If you are new to Module Federation, you can find an explanation about it <a href=\"https:\/\/www.angulararchitects.io\/aktuelles\/the-microfrontend-revolution-module-federation-in-webpack-5\/\">here<\/a>. <\/p>\n<p>The package <a href=\"https:\/\/www.npmjs.com\/package\/useless-lib\">useless-lib<\/a> is a dummy package, I've published for this example. It's available in the versions <code>1.0.0<\/code>, <code>1.0.1<\/code>, <code>1.1.0<\/code>, <code>2.0.0<\/code>, <code>2.0.1<\/code>, and <code>2.1.0<\/code>. In the future, I might add further ones. These versions allow us to simulate different kinds of version mismatches. <\/p>\n<p>To indicate the installed version, <code>useless-lib<\/code> exports a <code>version<\/code> constant. As you can see in the screenshot above, the shell and the micro frontend display this constant. In the shown constellation, both use the same version (<code>1.0.0<\/code>), and hence they can share it. Therefore, <code>useless-lib<\/code> is only loaded once.<\/p>\n<p>However, in the following sections, we will examine what happens if there are version mismatches between the <code>useless-lib<\/code> used in the shell and the one used in the <code>microfrontend<\/code>. This also allows me to explain different concepts Module Federation implements for dealing with such situations.<\/p>\n<h2>Semantic Versioning by Default<\/h2>\n<p>For our first variation, let's assume our <code>package.json<\/code> is pointing to the following versions:<\/p>\n<ul>\n<li><strong>Shell:<\/strong> useless-lib@^1.0.0<\/li>\n<li><strong>MFE1:<\/strong> useless-lib@^1.0.1<\/li>\n<\/ul>\n<p>This leads to the following result:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/static-1-0-0-vs-1-0-1.png\" alt=\"\" \/><\/p>\n<p>Module Federation decides to go with version <code>1.0.1<\/code> as this is the highest version compatible with both applications according to semantic versioning (^1.0.0 means, we can also go with a higher minor and patch versions).<\/p>\n<h2>Fallback Modules for Incompatible Versions<\/h2>\n<p>Now, let's assume we've adjusted our dependencies in <code>package.json<\/code> this way:<\/p>\n<ul>\n<li><strong>Shell:<\/strong> useless-lib@~1.0.0<\/li>\n<li><strong>MFE1:<\/strong> useless-lib@1.1.0<\/li>\n<\/ul>\n<p>Both versions are not compatible with each other (<code>~1.0.0<\/code> means, that only a higher patch version but not a higher minor version is acceptable).<\/p>\n<p>This leads to the following result:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/static-1-0-0-vs-1-1-0.png\" alt=\"Using Fallback Module\" \/><\/p>\n<p>This shows that Module Federation uses different versions for both applications. In our case, each application falls back to its own version, which is also called the fallback module.<\/p>\n<p> <!--\n FRAGE: Wenn ich hier auf einer oder auf beiden Seiten <code>strictVersion:false<\/code> setze, \u00e4ndert sich nichts am Verhalten. Ist das so gewollt?\n Wenn ich hier auf einer oder auf beiden Seiten <code>strictVersion:true<\/code> setze, bekomme ich auch keine Warnung. Ist das so gewollt?\n --><\/p>\n<h2>Differences With Dynamic Module Federation<\/h2>\n<p>Interestingly, the behavior is a bit different when we load the micro frontends including their remote entry points just on demand using Dynamic Module Federation. The reason is that dynamic remotes are not known at program start, and hence Module Federation cannot draw their versions into consideration during its initialization phase.<\/p>\n<p>For explaining this difference, let's assume the shell is loading the micro frontend dynamically and that we have the following versions:<\/p>\n<ul>\n<li><strong>Shell:<\/strong> useless-lib@^1.0.0<\/li>\n<li><strong>MFE1:<\/strong> useless-lib@^1.0.1<\/li>\n<\/ul>\n<p>While in the case of classic (static) Module Federation, both applications would agree upon using version <code>1.0.1<\/code> during the initialization phase, here in the case of dynamic module federation, the shell does not even know of the micro frontend in this phase. Hence, it can only choose for its own version: <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/dynamic-1-0-0-vs-1-0-1.png\" alt=\"Dynamic Microfrontend falls back to own version\" \/><\/p>\n<p>If there were other static remotes (e. g. micro frontends), the shell could also choose for one of their versions according to semantic versioning, as shown above.<\/p>\n<p>Unfortunately, when the dynamic micro frontend is loaded, module federation does not find an already loaded version compatible with <code>1.0.1<\/code>. Hence, the micro frontend falls back to its own version <code>1.0.1<\/code>.<\/p>\n<p>On the contrary, let's assume the shell has the highest compatible version:<\/p>\n<ul>\n<li><strong>Shell:<\/strong> useless-lib@^1.1.0<\/li>\n<li><strong>MFE1:<\/strong> useless-lib@^1.0.1<\/li>\n<\/ul>\n<p>In this case, the micro frontend would decide to use the already loaded one:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/dynamic-1-1-0-vs-1-0-1.png\" alt=\"Dynamic Microfrontend uses already loaded version\" \/><\/p>\n<p>To put it in a nutshell, in general, it's a good idea to make sure your shell provides the highest compatible versions when loading dynamic remotes as late as possible.<\/p>\n<p>However, as discussed in the article about <a href=\"https:\/\/www.angulararchitects.io\/aktuelles\/dynamic-module-federation-with-angular\/\">Dynamic Module Federation<\/a>, it's possible to dynamically load just the remote entry point on program start and to load the micro frontend later on demand. By splitting this into two loading processes, the behavior is exactly the same as with static (&quot;classic&quot;) Module Federation. The reason is that in this case the remote entry's meta data is available early enoght to be considering during the negotation of the versions.<\/p>\n<h2>Singletons<\/h2>\n<p>Falling back to another version is not always the best solution: Using more than one version can lead to unforeseeable effects when we talk about libraries holding state. This seems to be always the case for your leading application framework\/ library like Angular, React or Vue.<\/p>\n<p>For such scenarios, Module Federation allows us to define libraries as <strong>singletons<\/strong>. Such a singleton is only loaded once. <\/p>\n<p>If there are only compatible versions, Module Federation will decide for the highest one as shown in the examples above. However, if there is a version mismatch, singletons prevent Module Federation from falling back to a further library version.<\/p>\n<p>For this, let's consider the following version mismatch:<\/p>\n<ul>\n<li><strong>Shell:<\/strong> useless-lib@^2.0.0<\/li>\n<li><strong>MFE1:<\/strong> useless-lib@^1.1.0<\/li>\n<\/ul>\n<p>Let's also consider we've configured the <code>useless-lib<\/code> as a singleton:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Shell\n shared: { \n   &quot;rxjs&quot;: {}, \n   &quot;useless-lib&quot;: {\n     singleton: true,\n   }\n },<\/code><\/pre>\n<p>Here, we use an advanced configuration for defining singletons. Instead of a simple array, we go with an object where each key represents a package. <\/p>\n<p>If one library is used as a singleton, you will very likely set the singleton property in every configuration. Hence, I'm also adjusting the microfrontend's Module Federation configuration accordingly:<\/p>\n<pre><code class=\"language-javascript\">\/\/ MFE1\n shared: { \n     &quot;rxjs&quot;: {},\n     &quot;useless-lib&quot;: {\n         singleton: true\n     } \n }<\/code><\/pre>\n<p>To prevent loading several versions of the singleton package, Module Federation decides for only loading the highest available library which it is aware of during the initialization phase. In our case this is version <code>2.0.0<\/code>: <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/static-singleton-warning.png\" alt=\"Module Federation only loads the highest version for singletons\" \/><\/p>\n<p>However, as version <code>2.0.0<\/code> is not compatible with version <code>1.1.0<\/code> according to semantic versioning, we get a warning. If we are lucky, the federated application works even though we have this mismatch. However, if version <code>2.0.0<\/code> introduced braking changes we run into, our application might fail.<\/p>\n<p>In the latter case, it might be beneficial to fail fast when detecting the mismatch by throwing an example. To make Module Federation behaving this way, we set <code>strictVersion<\/code> to <code>true<\/code>: <\/p>\n<pre><code class=\"language-javascript\">\/\/ MFE1\n shared: { \n   &quot;rxjs&quot;: {},\n   &quot;useless-lib&quot;: {\n     singleton: true,\n     strictVersion: true\n   } \n }<\/code><\/pre>\n<p>The result of this looks as follows at runtime:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/static-singleton-strict-error.png\" alt=\"Version mismatches regarding singletons using strictVersion make the application fail\" \/><\/p>\n<h2>Accepting a Version Range<\/h2>\n<p>There might be cases where you know that a higher major version is backward compatible even though it doesn't need to be with respect to semantic versioning. In these scenarios, you can make Module Federation accepting a defined version range.<\/p>\n<p>To explore this option, let's one more time assume the following version mismatch:<\/p>\n<ul>\n<li><strong>Shell:<\/strong> useless-lib@^2.0.0<\/li>\n<li><strong>MFE1:<\/strong> useless-lib@^1.1.0<\/li>\n<\/ul>\n<p>Now, we can use the <code>requiredVersion<\/code> option for the <code>useless-lib<\/code> when configuring the microfrontend:<\/p>\n<pre><code class=\"language-javascript\">\/\/ MFE1\n shared: { \n   &quot;rxjs&quot;: {},\n   &quot;useless-lib&quot;: {\n     singleton: true,\n     strictVersion: true,\n     requiredVersion: &quot;&gt;=1.1.0 &lt;3.0.0&quot;\n   } \n }<\/code><\/pre>\n<p>According to this, we also accept everything having <code>2<\/code> as the major version. Hence, we can use the version <code>2.0.0<\/code> provided by the shell for the micro frontend:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/singleton-requiredversion.png\" alt=\"Accepting incompatible versions by defining a version range\" \/><\/p>\n<h2>Conclusion<\/h2>\n<p>Module Federation brings several options for dealing with different versions and version mismatches. Most of the time, you don't need to do anything, as it uses semantic versioning to decide for the highest compatible version. If a remote needs an incompatible version, it falls back to such one by default. <\/p>\n<p>In cases where you need to prevent loading several versions of the same package, you can define a shared package as a singleton. In this case, the highest version known during the initialization phase is used, even though it's not compatible with all needed versions. If you want to prevent this, you can make Module Federation throw an exception using the <code>strictVersion<\/code> option.<\/p>\n<p>You can also ease the requirements for a specific version by defining a version range using <code>requestedVersion<\/code>. You can even define several scopes for advanced scenarios where each of them can get its own version.<\/p>\n<h2>What's next? More on Architecture!<\/h2>\n<p>So far, we've seen that Module Federation is a strightforward solution for creating Micro Frontends on top of Angular. However, when dealing with it, several additional questions come in mind:<\/p>\n<ul>\n<li>According to which criteria can we sub-divide a huge application into micro frontends?<\/li>\n<li>Which access restrictions make sense?<\/li>\n<li>Which proven patterns should we use?<\/li>\n<li>How can we avoid pitfalls when working with Module Federation?<\/li>\n<li>Which advanced scenarios are possible?<\/li>\n<\/ul>\n<p>Our free eBook (about 100 pages) covers all these questions and more:<\/p>\n<p><a href=\"https:\/\/www.angulararchitects.io\/book\"><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/12\/cover-small.png\" alt=\"free ebook\"><\/a><\/p>\n<p>Feel free to <a href=\"https:\/\/www.angulararchitects.io\/book\">download it here<\/a> now!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Module Federation uses SemVer by default and there are lot&#8217;s of options to adjust its behavior.<\/p>\n","protected":false},"author":9,"featured_media":4322,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-4334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","post_series-module-federation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Getting Out of Version-Mismatch-Hell with Module Federation - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Out of Version-Mismatch-Hell with Module Federation - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Module Federation uses SemVer by default and there are lot&#039;s of options to adjust its behavior.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-06T21:25:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-19T14:10:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/top-img-text.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"314\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/getting-out-of-version-mismatch-hell-with-module-federation\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Getting Out of Version-Mismatch-Hell with Module Federation\",\"datePublished\":\"2020-09-06T21:25:28+00:00\",\"dateModified\":\"2024-01-19T14:10:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/getting-out-of-version-mismatch-hell-with-module-federation\/\"},\"wordCount\":1451,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/shutterstock-674161207.jpg\",\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/getting-out-of-version-mismatch-hell-with-module-federation\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/\",\"name\":\"Getting Out of Version-Mismatch-Hell with Module Federation - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/shutterstock-674161207.jpg\",\"datePublished\":\"2020-09-06T21:25:28+00:00\",\"dateModified\":\"2024-01-19T14:10:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/shutterstock-674161207.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/shutterstock-674161207.jpg\",\"width\":2048,\"height\":1365},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Out of Version-Mismatch-Hell with Module Federation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Getting Out of Version-Mismatch-Hell with Module Federation - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/","og_locale":"en_US","og_type":"article","og_title":"Getting Out of Version-Mismatch-Hell with Module Federation - ANGULARarchitects","og_description":"Module Federation uses SemVer by default and there are lot's of options to adjust its behavior.","og_url":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/","og_site_name":"ANGULARarchitects","article_published_time":"2020-09-06T21:25:28+00:00","article_modified_time":"2024-01-19T14:10:08+00:00","og_image":[{"width":600,"height":314,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/top-img-text.png","type":"image\/png"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/getting-out-of-version-mismatch-hell-with-module-federation\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Getting Out of Version-Mismatch-Hell with Module Federation","datePublished":"2020-09-06T21:25:28+00:00","dateModified":"2024-01-19T14:10:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/getting-out-of-version-mismatch-hell-with-module-federation\/"},"wordCount":1451,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/shutterstock-674161207.jpg","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/getting-out-of-version-mismatch-hell-with-module-federation\/","url":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/","name":"Getting Out of Version-Mismatch-Hell with Module Federation - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/shutterstock-674161207.jpg","datePublished":"2020-09-06T21:25:28+00:00","dateModified":"2024-01-19T14:10:08+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/shutterstock-674161207.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2020\/09\/shutterstock-674161207.jpg","width":2048,"height":1365},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/aktuelles\/getting-out-of-version-mismatch-hell-with-module-federation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Getting Out of Version-Mismatch-Hell with Module Federation"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/4334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=4334"}],"version-history":[{"count":1,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/4334\/revisions"}],"predecessor-version":[{"id":24239,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/4334\/revisions\/24239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/4322"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=4334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=4334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=4334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}