feat(angular): migrate to angular rspack 21 (#31216)

## Current Behavior
The Angular plugin currently uses Angular Rspack at `^20.7.0`.
The latest release of Angular Rspack is `21.0.0`

## Expected Behavior
Use the latest version of Angular Rspack

docs/blog/2025-03-19-using-angular-with-rspack.md

@@ -210,11 +210,9 @@ The following are known limitations and missing features of Angular Rspack:
 - Angular's built-in support for Internationalization (i18n) is not supported. _**UPDATE**: As of Angular Rspack version 20.8, i18n is supported._
 - Server Routing is not supported - still experimental in Angular currently.
 - App Engine APIs are not supported - still experimental in Angular currently.
-- Optimization is not currently 1:1 with Angular's optimization - however, there are still great optimizations that are made.
+- Optimization is not currently 1:1 with Angular's optimization - however, there are still great optimizations that are made. _**UPDATE**: As of Angular Rspack version 21, Optimization is 1:1 with Angular's optimization._
-  - Styles optimization for `inline-critical` and `remove-special-comments` are not yet implemented.
-  - Inlining of fonts is not yet implemented.
 - Web Workers are not fully supported. _**UPDATE**: As of Angular Rspack version 20.8, Web Workers are supported._
-- Hot Module Replacement (HMR) is partially supported.
+- Hot Module Replacement (HMR) is partially supported. _**UPDATE**: As of Angular Rspack version 21, HMR is supported._
 
 If you have any other missing features or limitations, please [let us know](https://github.com/nrwl/angular-rspack/issues/new).
 

docs/blog/2025-04-14-scaffold-angular-rspack-applications.md

@@ -133,6 +133,7 @@ It’s been great to see the progress on Angular Rspack so far, but it’s not d
 
 **[UPDATE - 2025-04-25]** - We've released version 20.8 of Angular Rspack that includes support for i18n.
 **[UPDATE - 2025-05-06]** - We've released version 20.9 of Angular Rspack that includes support for SSG.
+**[UPDATE - 2025-05-14]** - We've released version 21 of Angular Rspack that reaches feature parity with the Angular 19.2.
 
 Stay tuned to our socials to stay up to date on the latest Angular Rspack news!
 

docs/generated/manifests/nx-api.json

@@ -444,6 +444,16 @@
       }
     },
     "migrations": {
+      "/nx-api/angular/migrations/21.1.0-package-updates": {
+        "description": "",
+        "file": "generated/packages/angular/migrations/21.1.0-package-updates.json",
+        "hidden": false,
+        "name": "21.1.0-package-updates",
+        "version": "21.1.0-beta.1",
+        "originalFilePath": "/packages/angular",
+        "path": "/nx-api/angular/migrations/21.1.0-package-updates",
+        "type": "migration"
+      },
       "/nx-api/angular/migrations/change-data-persistence-operators-imports-to-ngrx-router-store-data-persistence": {
         "description": "Change the data persistence operator imports to '@ngrx/router-store/data-persistence'.",
         "file": "generated/packages/angular/migrations/change-data-persistence-operators-imports-to-ngrx-router-store-data-persistence.json",

docs/generated/packages-metadata.json

@@ -439,6 +439,16 @@
       }
     ],
     "migrations": [
+      {
+        "description": "",
+        "file": "generated/packages/angular/migrations/21.1.0-package-updates.json",
+        "hidden": false,
+        "name": "21.1.0-package-updates",
+        "version": "21.1.0-beta.1",
+        "originalFilePath": "/packages/angular",
+        "path": "angular/migrations/21.1.0-package-updates",
+        "type": "migration"
+      },
       {
         "description": "Change the data persistence operator imports to '@ngrx/router-store/data-persistence'.",
         "file": "generated/packages/angular/migrations/change-data-persistence-operators-imports-to-ngrx-router-store-data-persistence.json",

docs/generated/packages/angular/migrations/21.1.0-package-updates.json

@@ -0,0 +1,17 @@
+{
+  "name": "21.1.0-package-updates",
+  "version": "21.1.0-beta.1",
+  "packages": {
+    "@nx/angular-rspack": {
+      "version": "^21.0.1",
+      "alwaysAddToPackageJson": false
+    }
+  },
+  "aliases": [],
+  "description": "",
+  "hidden": false,
+  "implementation": "",
+  "path": "/packages/angular",
+  "schema": null,
+  "type": "migration"
+}

docs/shared/guides/angular-rspack/introduction.md

@@ -41,10 +41,6 @@ The following are known limitations and missing features of Angular Rspack:
 
 - Server Routing is not supported - still experimental in Angular currently.
 - App Engine APIs are not supported - still experimental in Angular currently.
-- Optimization is not currently 1:1 with Angular's optimization - however, there are still great optimizations that are made.
-  - Styles optimization for `inline-critical` and `remove-special-comments` are not yet implemented.
-  - Inlining of fonts is not yet implemented.
-- Hot Module Replacement (HMR) is partially supported.
 
 If you have any other missing features or limitations, please [let us know](https://github.com/nrwl/angular-rspack/issues/new).
 

e2e/angular/src/misc.test.ts

@@ -8,6 +8,7 @@ import {
   updateFile,
 } from '@nx/e2e/utils';
 import { classify } from '@nx/devkit/src/utils/string-utils';
+import { join } from 'path';
 
 describe('Move Angular Project', () => {
   let proj: string;
@@ -161,8 +162,14 @@ describe('Convert Angular Webpack Project to Rspack', () => {
 
   it('should convert an Angular Webpack project to Rspack', async () => {
     runCLI(`generate @nx/angular:convert-to-rspack --project=${app1}`);
+    const rspackConfigFileContents = readFile(join(app1, 'rspack.config.ts'));
+    const updatedConfigFileContents = rspackConfigFileContents.replace(
+      `maximumError: '1mb'`,
+      `maximumError: '3mb'`
+    );
+    updateFile(join(app1, 'rspack.config.ts'), updatedConfigFileContents);
     const buildOutput = runCLI(`build ${app1}`);
     expect(buildOutput).toContain('rspack build');
-    expect(buildOutput).toContain('browser compiled');
+    expect(buildOutput).toContain('Successfully ran target build for project');
   });
 });

e2e/angular/src/projects.test.ts

@@ -154,6 +154,17 @@ describe('Angular Projects', () => {
     runCLI(
       `generate @nx/angular:app my-dir/${app} --bundler=rspack --no-interactive`
     );
+    const rspackConfigFileContents = readFile(
+      join('my-dir', app, 'rspack.config.ts')
+    );
+    const updatedConfigFileContents = rspackConfigFileContents.replace(
+      `maximumError: '1mb'`,
+      `maximumError: '3mb'`
+    );
+    updateFile(
+      join('my-dir', app, 'rspack.config.ts'),
+      updatedConfigFileContents
+    );
     runCLI(`build ${app}`);
 
     if (runE2ETests()) {

packages/angular/migrations.json

@@ -1615,6 +1615,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "21.1.0": {
+      "version": "21.1.0-beta.1",
+      "packages": {
+        "@nx/angular-rspack": {
+          "version": "^21.0.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/angular/src/utils/versions.ts

@@ -3,7 +3,7 @@ export const nxVersion = require('../../package.json').version;
 export const angularVersion = '~19.2.0';
 export const angularDevkitVersion = '~19.2.0';
 export const ngPackagrVersion = '~19.2.0';
-export const angularRspackVersion = '^20.7.0';
+export const angularRspackVersion = '^21.0.1';
 export const ngrxVersion = '^19.0.0';
 export const rxjsVersion = '~7.8.0';
 export const zoneJsVersion = '~0.15.0';

packages/workspace/src/utils/versions.ts

@@ -5,4 +5,4 @@ export const typescriptVersion = '~5.7.2';
 // TODO: remove when preset generation is reworked and
 // deps are not installed from workspace
 export const angularCliVersion = '~19.2.0';
-export const angularRspackVersion = '^20.9.0';
+export const angularRspackVersion = '^21.0.1';