Angular Rspack and Rsbuild Tools

---

Build Angular with Rspack and Rsbuild

The goal of @nx/angular-rspack and @nx/angular-rsbuild is to make it easy and straightforward to build Angular applications with Rspack and Rsbuild.

Configuration

Configuration is controlled entirely via the Rspack/Rsbuild config.
Both tools offer a createConfig function to aid in the creation of the configuration.

• Rspack Configuration Guide
• Rsbuild Configuration Guide

Documentation

The documentation for this project can be found at angular-rspack.dev.

---

Feature Parity

The following aims to compare features of Rspack and Rsbuild, and it's Angular wrapper with Angular's standards (Angular CLI and Webpack/esbuild).

Rspack and Rsbuild are modern, high-performance JavaScript build tools designed as alternatives to Webpack and other traditional bundlers.

📌 Mapping @nx/angular-rspack & @nx/angular-rsbuild Packages to Angular CLI Components

This table maps the key angular-rspack and angular-rsbuild packages to their equivalent Angular CLI components to show how Rspack and Rsbuild replace or mirror Angular CLI's system.

Package Comparison

angular-rspack / angular-rsbuild Package	New Equivalent in Angular CLI / DevKit	Old Equivalent in Angular CLI / DevKit	Description
@nx/angular-rspack	@angular/build	@angular-devkit/build-angular	Core build system for ng-rspack, replacing Angular CLI's Webpack-based builder.
@nx/angular-rspack-compiler	@angular/build	@angular/build	Compiler for Angular applications using Rspack, leveraging abstractions from @angular/build.
@nx/angular-rsbuild	@angular/build (Builder API)	@angular-devkit/build-angular	Rsbuild plugin for Angular projects, similar to Angular CLI's Webpack-based builder API.

Feature Comparisons

Legend:

• ✅ Fully Supported
• ⚠️ Partial Support
• ❌ Not Supported
• 🔘 Not Applicable
• 🌟 Best-in-Class

Feature	State	angular-rspack / angular-rsbuild Package	State	New Equivalent (@angular/build)	State	Old Equivalent (@angular-devkit)	Notes
Builder / Build Performance	✅🌟	[1] Rspack / Rsbuild	✅	Angular Esbuild	⚠️	Webpack	Rspack & Rsbuild (Rust-based) are optimized for performance. New Angular uses Esbuild, replacing Webpack for faster builds.
Plugins & Loaders	✅	-	✅	-	✅	-
- CSS Loader	✅	CSS Loader	✅	CSS Loader	✅	CSS Loader
- SCSS/SASS Loader	✅	SCSS Loader	✅	SCSS Loader	✅	SCSS Loader
- LESS Loader	✅	LESS Loader	✅	LESS Loader	✅	LESS Loader
- Style Loader	🚧	Style Loader	✅	Style Loader	✅	Style Loader
Configuration File (Bundler)	✅	Rspack Config (rspack.config.js)	✅	Angular JSON (angular.json)	✅	Webpack Config (webpack.config.js)	Angular combines bundler and builder configs in one file (angular.json)
Configuration File (Builder)	✅	Rsbuild Config (rsbuild.config.ts)	✅	Angular JSON (angular.json)	✅	Webpack Config (webpack.config.js)
Compiler	✅	@nx/angular-rspack-compiler	✅	@angular/build	✅	@angular/compiler
Automatic Downleveling via browserslist	❌	-	✅	-	✅	-	Can be supported via Rspack Target
Build Flags (NG_BUILD_MANGLE=0, etc.)	❌	-	✅	-	✅	-	No method to override SWC options
HMR (Hot Module Replacement)	⚠️	@nx/angular-rspack @nx/angular-rsbuild	✅	@angular/build	✅	@angular-devkit/build-angular
TypeScript Handling	✅	Rspack SWC	✅	Angular Esbuild	✅	Webpack TypeScript	Rspack uses SWC, Angular uses Esbuild
Tree Shaking	✅	-	✅	-	✅	-
Asset Management	✅	-	✅	-	✅	-
Development Server	✅	-	✅	-	✅	-
Schematics	⚠️	-	✅	-	✅	-
- Generate Application	⚠️	-	✅	ng generate app	✅	ng generate app
- Serve Application	✅	-	✅	ng serve	✅	ng serve
- Build Application	✅	-	✅	ng build	✅	ng build
Migration from Webpack	✅	-	⚠️	-	⚠️	-	Rspack serves as a drop-in replacement for Webpack; Angular is transitioning to Esbuild

• [1] For build speed comparison see benchmarks

---