{"id":30874,"date":"2025-07-14T12:49:34","date_gmt":"2025-07-14T10:49:34","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/"},"modified":"2025-07-14T13:06:34","modified_gmt":"2025-07-14T11:06:34","slug":"fixing-dx-friction-automatic-shell-reloading-in-native-federation","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/","title":{"rendered":"Fixing DX Friction: Automatic Shell Reloading in Native 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-angular69ef270d769fa\" 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-angular69ef270d769fa\"\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 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><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/combining-native-federation-and-module-federation\/\">Combining Native Federation and Module Federation<\/a><\/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><span class=\"wp-post-series-box__current\">Fixing DX Friction: Automatic Shell Reloading in Native Federation<\/span><\/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>Developing micro frontend architectures brings tremendous benefits for team autonomy and scalability, but it also introduces unique challenges in the development workflow. One of the most requested features was automatically reloading the shell application when a remote has been changed during development. Native Federation 20.0.7 addresses this challenge with automatic reload through Server-Sent Events (SSE).<\/p>\n<h2>The Developer Experience Challenge<\/h2>\n<p>In traditional single-page applications, reload is taken for granted. You save a file, the development server rebuilds, and your browser automatically reflects the changes. However, in micro frontend architectures, this seamless experience breaks down at the boundaries between applications. When you modify code in the Microfrontend:<\/p>\n<ol>\n<li><strong>The micro frontend rebuilds<\/strong> - Angular's dev server detects changes and rebuilds the federation artifacts<\/li>\n<li><strong>The shell remains unaware<\/strong> - The shell application has no knowledge that the remote micro frontend has been updated<\/li>\n<li><strong>Manual intervention required<\/strong> - Developers must manually refresh the shell browser to see their changes<\/li>\n<\/ol>\n<p>This workflow interruption happens frequently during active development, creating significant friction and reducing productivity.<\/p>\n<h2>The Solution: Build Notifications via SSE<\/h2>\n<p>Native Federation 20.0.7 introduces a notification system that bridges the gap between independent micro frontend builds and shell application awareness. The solution leverages Server-Sent Events (SSE) to create a real-time communication channel between micro frontends and their consuming shells.<\/p>\n<h2>Architecture Overview<\/h2>\n<p>The notification system consists of three key components working together:<\/p>\n<h3>1. Build Notification Server<\/h3>\n<p>Each micro frontend in development mode initializes an SSE endpoint alongside its federation artifacts. This lightweight server:<\/p>\n<ul>\n<li>Detects when federation builds complete successfully or fail<\/li>\n<li>Broadcasts standardized events to connected clients<\/li>\n<li>Manages connection lifecycle and cleanup<\/li>\n<li>Operates only during local development<\/li>\n<\/ul>\n<h3>2. Federation Metadata<\/h3>\n<p>The system extends the standard <code>remoteEntry.json<\/code> with build notification metadata:<\/p>\n<pre><code class=\"language-json\">{\n  &quot;name&quot;: &quot;booking-mf&quot;,\n  &quot;shared&quot;: {...},\n  &quot;exposes&quot;: {...},\n  &quot;buildNotificationsEndpoint&quot;: &quot;http:\/\/localhost:4201\/federation-events&quot;\n}<\/code><\/pre>\n<p>This endpoint URL is automatically generated and exposed, making it discoverable by shell applications without manual configuration.<\/p>\n<h3>3. Client-Side Event Listeners<\/h3>\n<p>Shell applications automatically detect and connect to available notification endpoints during the federation initialization process. When build events are received, the shell can then refresh the page.<\/p>\n<h2>Implementation Details<\/h2>\n<h3>Micro Frontend Configuration<\/h3>\n<p>Build notifications work out of the box without any configuration. However, you can customize the behavior if needed:<\/p>\n<pre><code class=\"language-typescript\">\/\/ In your federation.config.js (optional configuration)\nexport default {\n  name: &#039;booking-mf&#039;,\n  exposes: {\n    &#039;.\/BookingComponent&#039;: &#039;.\/src\/app\/booking\/booking.component.ts&#039;\n  },\n  buildNotifications: {\n    enable: true, \/\/ This is the default value\n    endpoint: &#039;\/@angular-architects\/native-federation:build-notifications&#039; \/\/ This is the default value\n  }\n};<\/code><\/pre>\n<h3>Automatic Shell Integration<\/h3>\n<p>Shell applications automatically discover and connect to notification endpoints with no additional configuration required:<\/p>\n<pre><code class=\"language-typescript\">\/\/ Shell initialization (existing code remains unchanged)\nimport { initFederation } from &#039;@softarc\/native-federation-runtime&#039;;\n\ninitFederation({\n  &#039;booking-mf&#039;: &#039;http:\/\/localhost:4201\/remoteEntry.json&#039;,\n  &#039;checkin-mf&#039;: &#039;http:\/\/localhost:4202\/remoteEntry.json&#039;\n})\n.then(() =&gt; import(&#039;.\/bootstrap&#039;))\n.catch(err =&gt; console.error(err));<\/code><\/pre>\n<p>Behind the scenes, the initialization process:<\/p>\n<ol>\n<li><strong>Fetches federation manifests<\/strong> from each configured micro frontend<\/li>\n<li><strong>Discovers notification endpoints<\/strong> from the <code>remoteEntry.json<\/code> metadata<\/li>\n<li><strong>Establishes SSE connections<\/strong> to available endpoints<\/li>\n<li><strong>Listens for build events<\/strong> and reloads the page when necessary<\/li>\n<\/ol>\n<h3>Manual Event Listening for Custom Logic<\/h3>\n<p>If you need to add extra custom logic when builds complete, you can manually listen to build events in your shell application:<\/p>\n<pre><code class=\"language-typescript\">\n\/\/ Or with custom event handling\nconst eventSource = new EventSource(&#039;http:\/\/localhost:4201\/federation-events&#039;);\n\neventSource.onmessage = function (event) {\n  const data = JSON.parse(event.data);\n\n  switch(data.type) {\n    case &#039;BUILD_COMPLETED&#039;:\n\n      console.log(&#039;Build completed, updating specific micro frontend...&#039;);\n      \/\/ Your extra custom logic\n      break;\n    case &#039;BUILD_ERROR&#039;:\n      \/\/ Show custom error handling\n      console.error(&#039;Build failed:&#039;, data.error);\n      break;\n  }\n};<\/code><\/pre>\n<h2>Summary<\/h2>\n<p>The introduction of automatic  reload for micro frontends in Native Federation 20.0.7 eliminates a major friction point in micro frontend development workflows. By leveraging Server-Sent Events to create communication between micro frontends and shell applications, developers can maintain the productivity they expect from modern development tools while working with distributed frontend architectures.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is post 5 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":34,"featured_media":30869,"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-30874","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>Fixing DX Friction: Automatic Shell Reloading in Native 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\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fixing DX Friction: Automatic Shell Reloading in Native Federation - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 5 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\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-14T10:49:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-14T11:06:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/Kopie-von-Blog.png\" \/>\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\/png\" \/>\n<meta name=\"author\" content=\"Alejandro Ramirez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/Kopie-von-Blog.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alejandro Ramirez\" \/>\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\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/\"},\"author\":{\"name\":\"Alejandro Ramirez\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/085387f2ad0b56c0c7ab7ab5025ffd85\"},\"headline\":\"Fixing DX Friction: Automatic Shell Reloading in Native Federation\",\"datePublished\":\"2025-07-14T10:49:34+00:00\",\"dateModified\":\"2025-07-14T11:06:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/\"},\"wordCount\":491,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/shutterstock_2490247539.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/\",\"name\":\"Fixing DX Friction: Automatic Shell Reloading in Native Federation - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/shutterstock_2490247539.jpg\",\"datePublished\":\"2025-07-14T10:49:34+00:00\",\"dateModified\":\"2025-07-14T11:06:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/shutterstock_2490247539.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/shutterstock_2490247539.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fixing DX Friction: Automatic Shell Reloading in Native 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\/085387f2ad0b56c0c7ab7ab5025ffd85\",\"name\":\"Alejandro Ramirez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/265418c8ec165b33b64e7114acd346efbd239964c42eaff34f1c8b823a9ac165?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/265418c8ec165b33b64e7114acd346efbd239964c42eaff34f1c8b823a9ac165?s=96&d=mm&r=g\",\"caption\":\"Alejandro Ramirez\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fixing DX Friction: Automatic Shell Reloading in Native 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\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/","og_locale":"en_US","og_type":"article","og_title":"Fixing DX Friction: Automatic Shell Reloading in Native Federation - ANGULARarchitects","og_description":"This is post 5 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\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/","og_site_name":"ANGULARarchitects","article_published_time":"2025-07-14T10:49:34+00:00","article_modified_time":"2025-07-14T11:06:34+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/Kopie-von-Blog.png","type":"image\/png"}],"author":"Alejandro Ramirez","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/Kopie-von-Blog.png","twitter_misc":{"Written by":"Alejandro Ramirez","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/"},"author":{"name":"Alejandro Ramirez","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/085387f2ad0b56c0c7ab7ab5025ffd85"},"headline":"Fixing DX Friction: Automatic Shell Reloading in Native Federation","datePublished":"2025-07-14T10:49:34+00:00","dateModified":"2025-07-14T11:06:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/"},"wordCount":491,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/shutterstock_2490247539.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/","name":"Fixing DX Friction: Automatic Shell Reloading in Native Federation - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/shutterstock_2490247539.jpg","datePublished":"2025-07-14T10:49:34+00:00","dateModified":"2025-07-14T11:06:34+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/shutterstock_2490247539.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2025\/07\/shutterstock_2490247539.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/fixing-dx-friction-automatic-shell-reloading-in-native-federation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Fixing DX Friction: Automatic Shell Reloading in Native 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\/085387f2ad0b56c0c7ab7ab5025ffd85","name":"Alejandro Ramirez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/265418c8ec165b33b64e7114acd346efbd239964c42eaff34f1c8b823a9ac165?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/265418c8ec165b33b64e7114acd346efbd239964c42eaff34f1c8b823a9ac165?s=96&d=mm&r=g","caption":"Alejandro Ramirez"}}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/30874","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\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=30874"}],"version-history":[{"count":2,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/30874\/revisions"}],"predecessor-version":[{"id":30876,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/30874\/revisions\/30876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/30869"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=30874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=30874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=30874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}