{"id":27448,"date":"2025-01-02T22:04:26","date_gmt":"2025-01-02T21:04:26","guid":{"rendered":"https:\/\/www.angulararchitects.io\/blog\/nx-with-rspack-and-module-federation\/"},"modified":"2025-01-03T15:04:56","modified_gmt":"2025-01-03T14:04:56","slug":"nx-with-rspack-and-module-federation","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/nx-with-rspack-and-module-federation\/","title":{"rendered":"Nx and Angular with Rspack and Module Federation"},"content":{"rendered":"

In just a few years, Module Federation<\/a> grew from a first implementation that shipped with webpack 5 to a whole ecosystem. Meanwhile, we have an implementation for rspack<\/a>, a port to vite<\/a>, and a runtime that can be used across the whole ecosystem. <\/p>\n

There are also several third parties in this space: Zephyr<\/a> offers a cloud-based service for fast deployments leveraging Module Federation, and Nx<\/a> provides a comfortable integration that simplifies building Micro Frontends with Angular, React, and other frameworks and improves incremental builds. Furthermore, there is our take, Native Federation<\/a>, a portable bundler-agnostic implementation that leverages web standards and integrates into Angular by wrapping the CLI's new esbuild-based ApplicationBuilder.<\/code><\/p>\n

Since version 20, Nx offers executors integrating rspack and rsbuild<\/a>. The latter one builds on top of rspack and provides a performant out-of-the-box setup for usual build requirements. Nx' investment into rspack and rsbuild makes incorporating Module Federation on top of rspack easy. While, so far, Nx does not include an official rspack-based executor for Angular projects, Colum Ferry<\/a> from the Nx team recently published an early version of the open-source package @ng-rsbuild\/plugin-nx<\/a> that fills this gap by leveraging rsbuild. Also, it already supports SSR.<\/p>\n

As a community solution, @ng-rsbuild\/plugin-nx is not an official part of Nx; however, having someone like Colum behind it immediately builds trust.<\/p>\n

In this article, I show how to use this package together with Nx, Angular, and Module Federation to build a Micro Frontend-based solution. For this, I'm using my usual Micro Frontend showcase:<\/p>\n

\"Demo<\/p>\n

\ud83d\udcc2 Source Code<\/a><\/p>\n

\nDisclaimer: @ng-rsbuild\/plugin-nx is currently in Alpha. So things might change and be improved. I will keep you posted here.\n<\/p><\/blockquote>\n

Setting up an Nx Workspace<\/h2>\n

To get started, let's add the rsbuild plugin for Angular to a newly created Nx 19 workspace and generate a shell<\/code> and a Micro Frontend mfe1<\/code> with it:<\/p>\n

npx nx add @ng-rsbuild\/plugin-nx\n\nnpx nx g @ng-rsbuild\/plugin-nx:application shell\nnpx nx g @ng-rsbuild\/plugin-nx:application mfe1<\/code><\/pre>\n
For leveraging dynamic Federation, we also need the package @module-federation\/enhanced that contains the Module Federation runtime:<\/p>\n
npm i @module-federation\/enhanced<\/code><\/pre>\n
Implementing the Micro Frontend<\/h2>\n
The Micro Frontend's AppComponent<\/code> gets a simple implementation:<\/p>\n
@Component({\n  imports: [],\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrl: '.\/app.component.css',\n})\nexport class AppComponent {\n  title = 'myapp';\n\n  search(): void {\n    alert('Not implemented!');\n  }\n}\n\n\/\/ Add default export:\nexport default AppComponent;<\/code><\/pre>\n
Please see this simple component as a replacement for a more complex Micro Frontend that might combine several use cases via routing. Please note that the example also defines a default export<\/strong> for the AppComponent.<\/code> This simplifies lazy loading it into the shell a bit. <\/p>\n
For the sake of completeness, you find the component's markup below:<\/p>\n
<div id="container">\n    <h1>Select a Flight<\/h1>\n    <div>\n        <input type="text" placeholder="From">\n    <\/div>\n    <div>\n        <input type="text" placeholder="To">\n    <\/div>\n    <div>\n        <button (click)="search()">Search<\/button>\n    <\/div>\n<\/div><\/code><\/pre>\n
Async Bootstrapping<\/h2>\n
For our Module Federation setup, we need to switch to asynchronous bootstrapping. For this, copy the content of the file mfe1\/src\/main.ts<\/code> to a new file mfe1\/src\/bootstrap.ts<\/code> that is just imported in the former one:<\/p>\n
\/\/ mfe1\/src\/main.ts\nimport('.\/bootstrap');<\/code><\/pre>\n
It's important to use a dynamic and hence async import<\/code> here. This allows Module Federation to initialize and to take care of loading shared packages in all remaining parts of the application.<\/p>\n
More on this: Angular Architecture Workshop (online, interactive, advanced)<\/h2>\n
Become an expert for enterprise-scale and maintainable Angular applications with our Angular Architecture workshop!<\/a>\"\"<\/p>\n
English Version<\/a> | German Version<\/a>
\n<\/p>\n
Configuring the Micro Frontend<\/h2>\n
For configuring Module Federation, we need to adjust the rsbuild configuration, @ng-rsbuild\/plugin-nx generated in mfe1\/rsbuild.config.ts<\/code>:<\/p>\n
import { createConfig } from '@ng-rsbuild\/plugin-angular';\n\n\/\/ eslint-disable-next-line @nx\/enforce-module-boundaries\nimport { shareAll } from '..\/mf.tools';\n\nexport default createConfig({\n  browser: '.\/src\/main.ts',\n}, {\n  server: {\n    port: 4201\n  },\n  tools: {\n    rspack: {\n      output: {\n        uniqueName: 'mfe1',\n        publicPath: 'auto',\n      },\n    },\n  },  \n  moduleFederation: {\n    options: {\n      name: 'mfe1',\n      filename: 'remoteEntry.js',\n      exposes: {\n        '.\/Component': '.\/src\/app\/app.component.ts'\n      },\n      shared: {\n        ...shareAll({\n          singleton: true,\n          strictVersion: true,\n        })\n      }\n    }\n  }\n});<\/code><\/pre>\n
Besides switching to the port 4201 we need to define a publicPath<\/code>. This is the URL the Micro Frontend's bundles are deployed to. The value auto<\/code> defines that at runtime this URL should be inferred. If you want to control the logic for inferring this URL, you can set the getPublicPath <\/a> property to some JavaScript code executed at runtime.<\/p>\n
The remaining configuration consists of a typical Module Federation settings:<\/p>\n