Microfrontend Playground

armanossiloko

An Angular microfrontends demo: Angular host + Angular/React/Svelte remotes via Module Federation, Native Federation, Web Components, and iframe.

Download

Angular microfrontend system with Angular, React and Svelte remotes

A small microfrontend monorepo demo with an Angular host and several microfrontends (Angular, React and a remote Svelte). The idea is to demonstrate different approaches to microfrontends via Module Federation, Native Federation and via .</p> <p>Quick overview</p> <ul> <li><code>backend/</code> - A small NodeJS web server that acts as a mock REST API which returns a list of available microfrontends from the <a target="_blank" rel="nofollow noreferrer noopener external" href="./backend/json/apps.json" title="svelte theme">apps.json</a>.</li> <li><code>host-angular/</code> — Angular shell containing a navigation bar</li> <li><code>remote-angular-mf/</code> — an Angular Module federated remote</li> <li><code>remote-angular-nf/</code> — an Angular Native federated remote</li> <li><code>remote-angular-iframe/</code> — a standalone Angular application embedded using <code><iframe></code></li> <li><code>remote-react-mf/</code> — a small React application with simple routing</li> </ul> <p>Quick start (per project)</p> <ol> <li>Open a terminal and change into the project folder.</li> <li>Install its dependencies using <code>npm install</code>.</li> <li>Start the dev server using <code>npm run start</code>, <code>npm run dev</code> or <code>ng serve</code>.</li> <li>Go to <code>http://localhost:4200</code>.</li> </ol> <p>Big shoutout to <a target="_blank" rel="nofollow noreferrer noopener external" href="https://github.com/manfredsteyer" title="svelte theme">Manfred Steyer</a> and his examples for setting up microfrontends. A lot of his examples were either reused here or have been an inspiration for this repository.</p> </div> <div><h2 class="text-xl font-bold">Top categories</h2> <div class="categories grid grid-cols-1 md:grid-cols-3 gap-1 lg:grid-cols-4 mt-3"><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/tailwind">tailwind</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/daisyui">daisyui</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/admin template">admin template</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/popup">popup</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/mdsvex">mdsvex</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/portfolio">portfolio</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/blog">blog</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/form">form</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/ecommerce">ecommerce</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/ui">ui</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/carousel">carousel</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/auth">auth</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/dark">dark</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/seo">seo</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/image">image</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/routing">routing</a></div></div>   <footer class="border-t border-gray-400 mt-20 py-4"><ul class="md:flex items-center"><li class="mr-3"><a class="underline hover:text-red-500" href="/" title="Themes">Themes</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/resources" title="Resources">Resources</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/jobs" title="Jobs">Jobs</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="https://1.envato.market/4Pe0Br" title="Premium Templates">Premium Templates</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/category" title="Categories">Categories</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/blog" title="Blog">Blog</a></li><li class="mr-3"><a data-sveltekit-reload="true" class="underline hover:text-red-500" href="/submit" title="Submit">Submit</a></li><li class="mr-3"><a data-sveltekit-reload="true" class="underline hover:text-red-500" href="/submit?hire=true" title="Hire">Hire</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/sitemap.xml" title="Sitemap">Sitemap</a></li></ul></footer></div> <div class="loader-animation svelte-p14toz"><img src="/loader.svg" alt="Loading Svelte Themes"/></div>  <div hidden><div class="notifications no-print svelte-1420bpk"></div></div>   <script type="application/json" data-sveltekit-fetched data-url="/api/armanossiloko/microfrontend-playground.json" data-ttl="2592000">{"status":200,"statusText":"","headers":{},"body":"{\"id\":\"R_kgDOPbQPrw\",\"stargazerCount\":0,\"updatedAt\":\"2025-08-09T22:28:03Z\",\"homepageUrl\":\"\",\"openGraphImageUrl\":\"https://opengraph.githubassets.com/0f61bfa858288e8ebdba03d46a2fbaa7f168290d9e27ab724e0c8d8c6297612e/armanossiloko/microfrontend-playground\",\"description\":\"An Angular microfrontends demo: Angular host + Angular/React/Svelte remotes via Module Federation, Native Federation, Web Components, and iframe.\",\"descriptionHTML\":\"\u003Cdiv>An Angular microfrontends demo: Angular host + Angular/React/Svelte remotes via Module Federation, Native Federation, Web Components, and iframe.\u003C/div>\",\"forkCount\":0,\"url\":\"https://github.com/armanossiloko/microfrontend-playground\",\"nameWithOwner\":\"armanossiloko/microfrontend-playground\",\"name\":\"microfrontend-playground\",\"readme1\":{\"text\":\"# Angular microfrontend system with Angular, React and Svelte remotes\\n\\nA small microfrontend monorepo demo with an Angular host and several microfrontends (Angular, React and a remote Svelte). The idea is to demonstrate different approaches to microfrontends via Module Federation, Native Federation and via \u003Ciframe>.\\n\\nQuick overview\\n- `backend/` - A small NodeJS web server that acts as a mock REST API which returns a list of available microfrontends from the [apps.json](./backend/json/apps.json).\\n- `host-angular/` — Angular shell containing a navigation bar\\n- `remote-angular-mf/` — an Angular Module federated remote\\n- `remote-angular-nf/` — an Angular Native federated remote\\n- `remote-angular-iframe/` — a standalone Angular application embedded using `\u003Ciframe>`\\n- `remote-react-mf/` — a small React application with simple routing\\n\\nQuick start (per project)\\n1. Open a terminal and change into the project folder.\\n2. Install its dependencies using `npm install`.\\n3. Start the dev server using `npm run start`, `npm run dev` or `ng serve`.\\n4. Go to `http://localhost:4200`.\\n\\nBig shoutout to [Manfred Steyer](https://github.com/manfredsteyer) and his examples for setting up microfrontends. A lot of his examples were either reused here or have been an inspiration for this repository.\"},\"readme2\":null,\"readme3\":null,\"readme4\":null,\"readme5\":null,\"repositoryTopics\":{\"nodes\":[]},\"owner\":{\"avatarUrl\":\"https://avatars.githubusercontent.com/u/16511442?s=30&u=84ebc11f1b779bd146415b1db26c7829646f8b7c&v=4\",\"url\":\"https://github.com/armanossiloko\",\"login\":\"armanossiloko\"},\"htmlContent\":\"\u003Ch1 id=\\\"angular-microfrontend-system-with-angular-react-and-svelte-remotes\\\">Angular microfrontend system with Angular, React and Svelte remotes\u003C/h1>\\n\u003Cp>A small microfrontend monorepo demo with an Angular host and several microfrontends (Angular, React and a remote Svelte). The idea is to demonstrate different approaches to microfrontends via Module Federation, Native Federation and via \u003Ciframe>.\u003C/p>\\n\u003Cp>Quick overview\u003C/p>\\n\u003Cul>\\n\u003Cli>\u003Ccode>backend/\u003C/code> - A small NodeJS web server that acts as a mock REST API which returns a list of available microfrontends from the \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"./backend/json/apps.json\\\" title=\\\"svelte theme\\\">apps.json\u003C/a>.\u003C/li>\\n\u003Cli>\u003Ccode>host-angular/\u003C/code> — Angular shell containing a navigation bar\u003C/li>\\n\u003Cli>\u003Ccode>remote-angular-mf/\u003C/code> — an Angular Module federated remote\u003C/li>\\n\u003Cli>\u003Ccode>remote-angular-nf/\u003C/code> — an Angular Native federated remote\u003C/li>\\n\u003Cli>\u003Ccode>remote-angular-iframe/\u003C/code> — a standalone Angular application embedded using \u003Ccode><iframe>\u003C/code>\u003C/li>\\n\u003Cli>\u003Ccode>remote-react-mf/\u003C/code> — a small React application with simple routing\u003C/li>\\n\u003C/ul>\\n\u003Cp>Quick start (per project)\u003C/p>\\n\u003Col>\\n\u003Cli>Open a terminal and change into the project folder.\u003C/li>\\n\u003Cli>Install its dependencies using \u003Ccode>npm install\u003C/code>.\u003C/li>\\n\u003Cli>Start the dev server using \u003Ccode>npm run start\u003C/code>, \u003Ccode>npm run dev\u003C/code> or \u003Ccode>ng serve\u003C/code>.\u003C/li>\\n\u003Cli>Go to \u003Ccode>http://localhost:4200\u003C/code>.\u003C/li>\\n\u003C/ol>\\n\u003Cp>Big shoutout to \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://github.com/manfredsteyer\\\" title=\\\"svelte theme\\\">Manfred Steyer\u003C/a> and his examples for setting up microfrontends. A lot of his examples were either reused here or have been an inspiration for this repository.\u003C/p>\\n\"}"}</script> <script> { __sveltekit_1s8bq9o = { base: new URL("..", location).pathname.slice(0, -1) }; const element = document.currentScript.parentElement; Promise.all([ import("../_app/immutable/entry/start.fWvwASyf.js"), import("../_app/immutable/entry/app.Dm7JSh_H.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 6], data: [null,null], form: null, error: null }); }); if ('serviceWorker' in navigator) { addEventListener('load', function () { navigator.serviceWorker.register('../service-worker.js'); }); } } </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" crossorigin="anonymous" ></script> </div> </body> </html>