{"id":27164,"date":"2024-11-17T19:59:55","date_gmt":"2024-11-17T18:59:55","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/combining-native-federation-and-module-federation\/"},"modified":"2024-11-17T23:10:19","modified_gmt":"2024-11-17T22:10:19","slug":"combining-native-federation-and-module-federation","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/","title":{"rendered":"Combining Native Federation and Module Federation"},"content":{"rendered":"<div class=\"wp-post-series-box series-micro-frontends-with-modern-angular wp-post-series-box--expandable\">\n\t\t\t<input id=\"collapsible-series-micro-frontends-with-modern-angular69e73eb57a040\" 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-micro-frontends-with-modern-angular69e73eb57a040\"\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 3 of 6 in the series <em>&ldquo;Micro Frontends with Modern Angular&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\/micro-frontends-with-modern-angular-part-1-standalone-and-esbuild\/\">Micro Frontends with Modern Angular &#8211; Part 1: Standalone and esbuild<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/micro-frontends-with-modern-angular-part-2-multi-version-and-multi-framework-solutions-with-angular-elements-and-web-components\/\">Micro Frontends with Modern Angular &#8211; Part 2: Multi-Version and Multi-Framework Solutions with Angular Elements and Web Components<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><span class=\"wp-post-series-box__current\">Combining Native Federation and Module Federation<\/span><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/ssr-and-hydration-with-native-federation-for-angular\/\">SSR and Hydration with Native Federation for Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/\">Fixing DX Friction: Automatic Shell Reloading in Native Federation<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/native-federation-just-got-better-performance-dx-and-simplicity\/\">Native Federation Just Got Better: Performance, DX, and Simplicity<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n<p>A question we frequently get is how to add Native Federation to a system originally built with Module Federation. This can help with a gradual migration and also give feature teams the choice of which Federation flavor to use.<\/p>\n<p>This article demonstrates how this can be accomplished using the Module Federation Runtime in a Native Federation Shell.<\/p>\n<p>\ud83d\udcc2 <a href=\"https:\/\/github.com\/manfredsteyer\/mf-nf-poc\">Source Code<\/a> <\/p>\n<h2>Example Application<\/h2>\n<p>The example application used for this article is a simple shell that loads both, Module Federation and Native Federation based remotes. Dependecies are shared between the two worlds:<\/p>\n<p><video style=\"width:100%\" controls autoplay><source src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/mf-nf.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<h2>Prerequisites<\/h2>\n<p>Create a shell using Native Federation and add the Module Federation Runtime for loading Module Federation remotes. This runtime is part of the @module-federation\/enhanced package:<\/p>\n<pre><code class=\"language-bash\">npm i @module-federation\/enhanced<\/code><\/pre>\n<p>In <strong>all<\/strong> Native Federation projects where the Module Federation runtime is used or installed, skip it from being shared in your <code>federation.config.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">module.exports = withNativeFederation({\n  ...\n  skip: [\n    ...\n    \/^@module-federation\/,  \n        \/\/ Use RegExp to skip ALL entry points!\n  ]\n});<\/code><\/pre>\n<h2>Initializing the Shell<\/h2>\n<p>When initializing the shell, initialize both, Native Federation and Module Federation:<\/p>\n<pre><code class=\"language-typescript\">\/\/ main.ts\nimport { initFederation as initNativeFederation } from &#039;@angular-architects\/native-federation&#039;;\nimport { init as initModuleFederation } from &#039;@module-federation\/enhanced\/runtime&#039;;\nimport { getShared } from &#039;.\/app\/shared\/federatio-helpers&#039;;\n\n(async () =&gt; {\n  \/\/ Step 1: Initialize Native Federation\n  await initNativeFederation(&#039;federation.manifest.json&#039;);\n\n  \/\/ Step 2: Get metadata about libs shared via Native Federation\n  const shared = getShared();\n\n  \/\/ Step 3: Initialize Module Federation\n  \/\/  Remarks: Consider loading this MF config via the fetch API\n  initModuleFederation({\n    name: &#039;shell&#039;,\n    remotes: [\n      {\n        name: &#039;modfed-mf&#039;,\n        entry: &#039;http:\/\/localhost:4201\/remoteEntry.js&#039;,\n        type: &#039;esm&#039;,\n      },\n      {\n        name: &#039;react&#039;,\n        entry:\n          &#039;https:\/\/witty-wave-0a695f710.azurestaticapps.net\/remoteEntry.js&#039;,\n      },\n      {\n        name: &#039;angular2&#039;,\n        entry: &#039;https:\/\/gray-pond-030798810.azurestaticapps.net\/remoteEntry.js&#039;,\n      },\n      {\n        name: &#039;angular3&#039;,\n        entry:\n          &#039;https:\/\/gray-river-0b8c23a10.azurestaticapps.net\/remoteEntry.js&#039;,\n      }\n    ],\n    \/\/ Step 3a: Delegate shared libs from Native Federation\n    shared,\n  })\n  .initializeSharing();\n\n  \/\/ Step 4: Delegate to file bootstrapping the SPA\n  await import(&#039;.\/bootstrap&#039;);\n})();<\/code><\/pre>\n<p>The helper function <code>getShared<\/code> (see <a href=\"https:\/\/github.com\/manfredsteyer\/mf-nf-poc\/blob\/main\/src\/app\/shared\/federation-helpers.ts\">source code here<\/a>) returns metadata about the libs shared via Native Federation. This metadata is forwarded to the Module Federation config to bridge both worlds.<\/p>\n<h2>Loading the Micro Frontends<\/h2>\n<p>For loading the Micro Frontends use the respective helper from @module-federation\/enhanced\/runtime for Module Federation-based Micro Frontends and @angular-architects\/native-federation (or @softarc\/native-federation if you don't use Angular) for Native Federation-based ones:<\/p>\n<pre><code class=\"language-typescript\">...\nimport { loadRemote as loadModuleRemote } from &#039;@module-federation\/enhanced\/runtime&#039;;\nimport { loadRemoteModule as loadNativeRemote } from &#039;@angular-architects\/native-federation&#039;;\n\nexport const routes: Routes = [\n    {\n        path: &#039;&#039;,\n        pathMatch: &#039;full&#039;,\n        component: HomeComponent,\n    },\n\n    \/\/ MF-based Micro Frontend\n    {\n        path: &#039;modfed-mf&#039;,\n        loadComponent: () =&gt; loadModuleRemote&lt;any&gt;(&#039;modfed-mf\/Component&#039;).then(m =&gt; m.AppComponent)\n    },\n\n    \/\/ NF-based Micro Frontend\n    {\n        path: &#039;natfed-mf&#039;,\n        loadComponent: () =&gt; loadNativeRemote(&#039;natfed-mf&#039;, &#039;.\/Component&#039;).then(m =&gt; m.AppComponent)\n    },\n\n    ...\n]<\/code><\/pre>\n<p>For loading further frameworks in different versions, the example also uses a Wrapper component that loads Web Components using Federation. This approach is described <a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/micro-frontends-with-modern-angular-part-2-multi-version-and-multi-framework-solutions-with-angular-elements-and-web-components\/\">here<\/a>.<\/p>\n<h2>Further Steps<\/h2>\n<p>While this example shows how to bring both worlds together, in an real-world example you might want to abstract both options a bit more. For instance, you might want to load the configuration for the Module Federation Runtime from a file, similar to the <code>federation.manifest.json<\/code> used for Native Federation. <\/p>\n<p>As an alternative, you might get metadata for both worlds from a service and a custom helper function could delegate the respective entries to Module and Native Federation during initialization. This metadata could also be used in a further helper function for loading a remote to decided wether to load it via Native oder Module Federation. <\/p>\n<h2>More on this: Angular Architecture Workshop (online, interactive, advanced)<\/h2>\n<p>Become an expert for enterprise-scale and maintainable Angular applications with our <a href=\"https:\/\/www.angulararchitects.io\/en\/angular-workshops\/advanced-angular-enterprise-architecture-incl-ivy\/\">Angular Architecture workshop!<\/a><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/sujet-en.jpg\" alt=\"\" \/><\/p>\n<p><a href=\"https:\/\/www.angulararchitects.io\/en\/angular-workshops\/advanced-angular-enterprise-architecture-incl-ivy\/\">All Details (English Workshop)<\/a> | <a href=\"https:\/\/www.angulararchitects.io\/schulungen\/advanced-angular-enterprise-anwendungen-und-architektur\/\">All Details (German Workshop)<\/a><br \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is post 3 of 6 in the series &ldquo;Micro Frontends with Modern Angular&rdquo; Micro Frontends with Modern Angular &#8211; Part 1: Standalone and esbuild Micro Frontends with Modern Angular &#8211; Part 2: Multi-Version and Multi-Framework Solutions with Angular Elements and Web Components Combining Native Federation and Module Federation SSR and Hydration with Native Federation [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":27159,"comment_status":"open","ping_status":"open","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":[18],"tags":[],"class_list":["post-27164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-micro-frontends-with-modern-angular"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Combining Native Federation and 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\/blog\/combining-native-federation-and-module-federation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Combining Native Federation and Module Federation - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 3 of 6 in the series &ldquo;Micro Frontends with Modern Angular&rdquo; Micro Frontends with Modern Angular &#8211; Part 1: Standalone and esbuild Micro Frontends with Modern Angular &#8211; Part 2: Multi-Version and Multi-Framework Solutions with Angular Elements and Web Components Combining Native Federation and Module Federation SSR and Hydration with Native Federation [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-17T18:59:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-17T22:10:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/sujet.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/sujet.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/\"},\"author\":{\"name\":\"Manfred Steyer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\"},\"headline\":\"Combining Native Federation and Module Federation\",\"datePublished\":\"2024-11-17T18:59:55+00:00\",\"dateModified\":\"2024-11-17T22:10:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/\"},\"wordCount\":386,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2153663517.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/\",\"name\":\"Combining Native Federation and Module Federation - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2153663517.jpg\",\"datePublished\":\"2024-11-17T18:59:55+00:00\",\"dateModified\":\"2024-11-17T22:10:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2153663517.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2153663517.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Combining Native Federation and 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\/f3de69c1e2bdb5ba04d8d2f5f998b81a\",\"name\":\"Manfred Steyer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Combining Native Federation and 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\/blog\/combining-native-federation-and-module-federation\/","og_locale":"en_US","og_type":"article","og_title":"Combining Native Federation and Module Federation - ANGULARarchitects","og_description":"This is post 3 of 6 in the series &ldquo;Micro Frontends with Modern Angular&rdquo; Micro Frontends with Modern Angular &#8211; Part 1: Standalone and esbuild Micro Frontends with Modern Angular &#8211; Part 2: Multi-Version and Multi-Framework Solutions with Angular Elements and Web Components Combining Native Federation and Module Federation SSR and Hydration with Native Federation [&hellip;]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/","og_site_name":"ANGULARarchitects","article_published_time":"2024-11-17T18:59:55+00:00","article_modified_time":"2024-11-17T22:10:19+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/sujet.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/sujet.jpg","twitter_misc":{"Written by":"Manfred Steyer","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/"},"author":{"name":"Manfred Steyer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a"},"headline":"Combining Native Federation and Module Federation","datePublished":"2024-11-17T18:59:55+00:00","dateModified":"2024-11-17T22:10:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/"},"wordCount":386,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2153663517.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/","name":"Combining Native Federation and Module Federation - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2153663517.jpg","datePublished":"2024-11-17T18:59:55+00:00","dateModified":"2024-11-17T22:10:19+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2153663517.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2024\/11\/shutterstock_2153663517.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Combining Native Federation and 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\/f3de69c1e2bdb5ba04d8d2f5f998b81a","name":"Manfred Steyer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","caption":"Manfred Steyer"}}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27164","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\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=27164"}],"version-history":[{"count":9,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27164\/revisions"}],"predecessor-version":[{"id":27184,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/27164\/revisions\/27184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/27159"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=27164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=27164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=27164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}