fix(module-federation): ensure angular rspack module federation supports live reload (#33137)

## Current Behavior
Angular Rspack outputs to CJS for Module Federation. It also has
potential issues to cause infinite live reload loops.

## Expected Behavior
Angular Rspack with Module Federation should work as expected

This PR also adds:
- example of Module Federation with Angular Rspack in
`examples/angular-rspack/module-federation`

Author: Coly010

examples/angular-rspack/module-federation/host/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../.eslintrc.json"
+}

examples/angular-rspack/module-federation/host/module-federation.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  name: 'examples-angular-rspack-mf-host',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
+  remotes: ['examples-angular-rspack-mf-remote'],
+  shared: (libraryName) => {
+    // This is specific to Nx Repo, otherwise dependencies that are irrelevant are considered and shared
+    if (
+      !libraryName.startsWith('@angular') &&
+      !libraryName.startsWith('zone.js')
+    ) {
+      return false;
+    }
+  },
+};

examples/angular-rspack/module-federation/host/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "examples-angular-rspack-mf-host",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {},
+  "dependencies": {
+    "@nx/angular-rspack": "workspace:*"
+  },
+  "devDependencies": {
+    "@nx/module-federation": "workspace:*",
+    "@rspack/core": "1.5.2",
+    "@rspack/cli": "1.5.2"
+  },
+  "nx": {
+    "targets": {
+      "serve": {
+        "dependsOn": [
+          "^build"
+        ]
+      },
+      "build": {
+        "dependsOn": [
+          "^build"
+        ]
+      }
+    }
+  }
+}

examples/angular-rspack/module-federation/host/public/favicon.ico

@@ -0,0 +1,87 @@
+const {
+  patchDevkitRequestPath,
+  patchModuleFederationRequestPath,
+} = require('../../patch-devkit-request-path');
+module.exports = () => {
+  if (global.NX_GRAPH_CREATION === undefined) {
+    // This is needed to ensure that the `@nx/angular-rspack` package can find the build artefact for `@nx/devkit`
+    // TODO(colum): Remove this once packages in Nx are built to local dist
+    const {
+      patchDevkitRequestPath,
+      patchModuleFederationRequestPath,
+    } = require('../../patch-devkit-request-path');
+    const cleanupDevkitPatch = patchDevkitRequestPath();
+    const cleanupModuleFederationPatch = patchModuleFederationRequestPath();
+    const {
+      NxModuleFederationPlugin,
+      NxModuleFederationDevServerPlugin,
+    } = require('@nx/module-federation/angular');
+    const { createConfig } = require('@nx/angular-rspack');
+    const mfConfig = require('./module-federation.config');
+    const config = createConfig(
+      {
+        options: {
+          root: __dirname,
+          outputPath: {
+            base: './dist',
+            browser: './browser',
+          },
+          index: './src/index.html',
+          browser: './src/main.ts',
+          tsConfig: './tsconfig.app.json',
+          polyfills: ['zone.js'],
+          assets: [{ glob: '**/*', input: 'public' }],
+          statsJson: true,
+          styles: ['./src/styles.scss'],
+        },
+        rspackConfigOverrides: {
+          plugins: [
+            new NxModuleFederationPlugin(
+              { config: mfConfig },
+              {
+                dts: false,
+              }
+            ),
+            new NxModuleFederationDevServerPlugin({ config: mfConfig }),
+          ],
+        },
+      },
+      {
+        development: {
+          options: {
+            extractLicenses: false,
+            optimization: false,
+            outputHashing: 'none',
+            namedChunks: true,
+            vendorChunk: true,
+            devServer: {
+              /**
+               * These values MUST be set to ensure that the webSocketSettings within the devServer config is configured to
+               * only listen for updates to this specific project. Otherwise, a live reload loop could be created.
+               */
+              publicHost: 'localhost:4200',
+              port: 4200,
+            },
+          },
+        },
+        production: {
+          options: {
+            extractLicenses: false,
+            outputHashing: 'all',
+            optimization: {
+              scripts: true,
+              styles: {
+                minify: false,
+                inlineCritical: true,
+              },
+            },
+          },
+        },
+      }
+    );
+    cleanupDevkitPatch();
+    cleanupModuleFederationPatch();
+    return config;
+  }
+  return {};
+};

examples/angular-rspack/module-federation/host/rspack.config.js

@@ -0,0 +1,15 @@
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZoneChangeDetection,
+} from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { appRoutes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(appRoutes),
+  ],
+};

examples/angular-rspack/module-federation/host/src/app/app.config.ts

@@ -0,0 +1,5 @@
+<h1>Hello world!</h1>
+<ul>
+  <li routerLink="remote">Remote</li>
+</ul>
+<router-outlet></router-outlet>

examples/angular-rspack/module-federation/host/src/app/app.html

@@ -0,0 +1,12 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [
+  {
+    path: 'remote',
+    loadChildren: () =>
+      // @ts-expect-error
+      import('examples-angular-rspack-mf-remote/Routes').then(
+        (m) => m!.remoteRoutes
+      ),
+  },
+];

examples/angular-rspack/module-federation/host/src/app/app.routes.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  imports: [RouterModule],
+  selector: 'app-root',
+  templateUrl: './app.html',
+})
+export class App {}

examples/angular-rspack/module-federation/host/src/app/app.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));