From d61683efc65a1f34bd91f8a071d5c4a205eeb2b6 Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Thu, 15 May 2025 13:13:02 +0100 Subject: [PATCH] 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 --- .../2025-03-19-using-angular-with-rspack.md | 6 ++---- ...4-14-scaffold-angular-rspack-applications.md | 1 + docs/generated/manifests/nx-api.json | 10 ++++++++++ docs/generated/packages-metadata.json | 10 ++++++++++ .../migrations/21.1.0-package-updates.json | 17 +++++++++++++++++ .../guides/angular-rspack/introduction.md | 4 ---- e2e/angular/src/misc.test.ts | 9 ++++++++- e2e/angular/src/projects.test.ts | 11 +++++++++++ packages/angular/migrations.json | 9 +++++++++ packages/angular/src/utils/versions.ts | 2 +- packages/workspace/src/utils/versions.ts | 2 +- 11 files changed, 70 insertions(+), 11 deletions(-) create mode 100644 docs/generated/packages/angular/migrations/21.1.0-package-updates.json diff --git a/docs/blog/2025-03-19-using-angular-with-rspack.md b/docs/blog/2025-03-19-using-angular-with-rspack.md index 2b17baad42..7f297e5a65 100644 --- a/docs/blog/2025-03-19-using-angular-with-rspack.md +++ b/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. - - Styles optimization for `inline-critical` and `remove-special-comments` are not yet implemented. - - Inlining of fonts is not yet implemented. +- 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._ - 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). diff --git a/docs/blog/2025-04-14-scaffold-angular-rspack-applications.md b/docs/blog/2025-04-14-scaffold-angular-rspack-applications.md index 5b3fb15095..cd482c74c7 100644 --- a/docs/blog/2025-04-14-scaffold-angular-rspack-applications.md +++ b/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! diff --git a/docs/generated/manifests/nx-api.json b/docs/generated/manifests/nx-api.json index 34176fd382..48ab4ee88a 100644 --- a/docs/generated/manifests/nx-api.json +++ b/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", diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index 5c37f7f098..5f83aa8ca9 100644 --- a/docs/generated/packages-metadata.json +++ b/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", diff --git a/docs/generated/packages/angular/migrations/21.1.0-package-updates.json b/docs/generated/packages/angular/migrations/21.1.0-package-updates.json new file mode 100644 index 0000000000..1f21f074bb --- /dev/null +++ b/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" +} diff --git a/docs/shared/guides/angular-rspack/introduction.md b/docs/shared/guides/angular-rspack/introduction.md index 2c83eab46e..828dab022f 100644 --- a/docs/shared/guides/angular-rspack/introduction.md +++ b/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). diff --git a/e2e/angular/src/misc.test.ts b/e2e/angular/src/misc.test.ts index 9f069a0347..196b95dcd5 100644 --- a/e2e/angular/src/misc.test.ts +++ b/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'); }); }); diff --git a/e2e/angular/src/projects.test.ts b/e2e/angular/src/projects.test.ts index 0d8d419103..b2d7b2f417 100644 --- a/e2e/angular/src/projects.test.ts +++ b/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()) { diff --git a/packages/angular/migrations.json b/packages/angular/migrations.json index 4e2c4044d9..9506b2fd42 100644 --- a/packages/angular/migrations.json +++ b/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 + } + } } } } diff --git a/packages/angular/src/utils/versions.ts b/packages/angular/src/utils/versions.ts index c6cf116cbb..7be0f8a15b 100644 --- a/packages/angular/src/utils/versions.ts +++ b/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'; diff --git a/packages/workspace/src/utils/versions.ts b/packages/workspace/src/utils/versions.ts index d0928fb8b5..b3b15a1b07 100644 --- a/packages/workspace/src/utils/versions.ts +++ b/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';