This article is part of the Angular Week series:
Configuring your build tooling for Angular applications has always been a lesser concern for most Angular developers due to the abstractions that Angular created called builders. The underlying implementation details were hidden from the developer who only needed to run either ng build or nx build.
Despite this, most Angular developers knew that it was originally Webpack that was used to build their applications. This was a great solution at the time and it was even possible to extend their builds by leveraging custom webpack configurations and plugins.
Over time, as applications grew in size and complexity, it became clear that the inherit slowness with Webpack build speeds was becoming more and more of an issue for Angular developers.
The Angular Team decided to address this issue by creating a new build pipeline that leveraged Esbuild.
Esbuild brought much-needed performance improvements to Angular builds, but existing Webpack-based applications were left with either a difficult migration path or no clear upgrade strategy.
To this day, many existing Angular applications still rely on Webpack because they cannot readily replace their Webpack configurations and plugins with equivalent Esbuild plugins. Thus, they are continuing to fight with slow builds reducing their productivity.
What about Rspack?
Rspack is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the Webpack ecosystem, allowing for almost seamless replacement of webpack, and provides lightning fast build speeds.
Because it supports the existing Webpack ecosystem, it provides an answer to teams that maintain Angular applications using Webpack and want to migrate to a faster build pipeline.
However, it is crucial to understand that Rspack is not completely compatible with the Webpack ecosystem with some slight nuances and low-level api differences that prevent certain plugins and loaders from working out of the box.
One such example is the AngularIvyPlugin which is a Webpack plugin that is used to support Angular's Ivy compiler. Therefore, it was not possible to simply drop in Rpsack and expect it to work with Angular applications. Many people have tried to get Rspack working with Angular, but it has proven to be a challenge, with partial support and partial success being reported in the past but with a lot of limitations or actual performance degradations over the Webpack approach.
Previous attempts to get Rspack working with Angular focused on porting the Webpack-specific plugins, loaders and configurations to Rspack, either as-is or by reproducing them. This approach was never fully successful.
Instead, a new approach was needed to support Rspack with Angular. A closer examination of how Angular compiles and bundles the application was required.
Introducing Angular Rspack
Angular Rspack started in September 2024 after I spent way too long investigating and researching how exactly Angular compiles and bundles for both their Webpack support and Esbuild support.
Something that I kept coming back to was that any Rspack solution that relied too much on Angular's Webpack support had the chance of being dropped by the Angular team as they continue to build out incredible new features with Esbuild. Instead, I decided that replicating and utilizing the abstractions the Angular team provided for their Esbuild support had a much stronger chance of longevity.
But before we dive into the technical details, I am excited to announce that Angular Rspack is now being maintained by the Nx team and is available for use with Nx. This means that you can now use Rspack with Angular and Nx and enjoy the benefits of both.
The new package is called @nx/angular-rspack and it is available on npm while the repository has been moved to nrwl/angular-rspack.
Nx already supports and integrates with a wide variety of build tooling across the ecosystem - filling in the gaps where developer experience (DX) needs to be improved - which makes Nx the perfect fit for continuing to maintain and build out Angular Rspack.
The support is still currently experimental, however, it is in a state that may be sufficient for your current needs. We invite you to try it out and to let us know if you run into issues by raising issues on the angular-rspack repo.
There are some limitations and missing features that are currently being worked on and on the roadmap to support. They have been listed at the bottom of this article.
Migrating from Angular Webpack to Angular Rspack
To make the migration process as smooth as possible, a new generator has been added to the @nx/angular package called convert-to-rspack which will help you migrate your Angular applications from Webpack to Rspack.
The steps are very simple:
- Run
nx migrate latestto update your workspace to the latest version of Nx. - Run
nx g @nx/angular:convert-to-rspackto migrate your Angular application to Rspack.
There is also a guide in our documentation that walks you through the process step-by-step. Even if you're currently using the Angular CLI, it's as simple as first running npx nx init in your workspace and then running npx nx g convert-to-rspack.
Using Angular Rspack
You'll notice that after migrating to Angular Rspack your build and serve targets have been removed from your project, and are instead inferred by the @nx/rspack/plugin. In addition, a new rspack.config.ts file has been created in your project which looks something like this:
1import { createConfig } from '@nx/angular-rspack';
2export default createConfig(
3 {
4 options: {
5 root: __dirname,
6 outputPath: {
7 base: '../../dist/apps/app',
8 },
9 index: './src/index.html',
10 browser: './src/main.ts',
11 polyfills: ['zone.js'],
12 tsConfig: './tsconfig.app.json',
13 assets: [
14 './src/favicon.ico',
15 './src/assets',
16 {
17 input: './public',
18 glob: '**/*',
19 },
20 ],
21 styles: ['./src/styles.scss'],
22 scripts: [],
23 },
24 },
25 {
26 production: {
27 options: {
28 outputPath: {
29 base: '../../dist/apps/app-prod',
30 },
31 index: './src/index.prod.html',
32 browser: './src/main.prod.ts',
33 tsConfig: './tsconfig.prod.json',
34 },
35 },
36 }
37);
38Building and Serving your Application
You can now run nx build app and nx serve app to build and serve your application via Rspack.
❯
nx build app
1> nx run app:build
2
3> rspack build --node-env=production
4
5● ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit browser:
6
7
8 browser compiled successfully in 2.32 s
9❯
nx serve app
1> nx run app:serve
2
3> rspack serve --node-env=development
4
5<i> [webpack-dev-server] [HPM] Proxy created: /api -> http://localhost:3000
6<i> [webpack-dev-server] Project is running at:
7<i> [webpack-dev-server] Loopback: http://127.0.0.1:8080/
8<i> [webpack-dev-server] Content not from webpack is served from '/Users/columferry/dev/nrwl/issues/rspack-angular/ng-rspack/e2e/fixtures/rspack-csr-css/public' directory
9<i> [webpack-dev-server] 404s will fallback to '/index.html'
10Listening on port: 8080
11● ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit browser:
12 browser compiled successfully in 2.33 s
13Using a configuration
To run the build with the production configuration:
1NGRS_CONFIG=production nx build app
2NGRS_CONFIG is an environment variable that you can use to specify which configuration to use. If the environment variable is not set, the production configuration is used by default.
Creating a new Angular Rspack application
We currently do not have a generator for creating a new Angular Rspack application, but we will soon and it will be available under a --bundler=rspack option on the @nx/angular:application generator.
However, you can still create a new Angular Rspack application by running the following commands:
❯
nx g @nx/angular:application myapp --bundler=webpack
❯
nx g @nx/angular:convert-to-rspack myapp
Benchmarks
Below is a table of benchmarks for the different bundlers available, run against an application consisting of ~800 lazy loaded routes with ~10 components each - totaling ~8000 components.
System Info
- MacBook Pro (macOS 15.3.1)
- Processor: M2 Max
- Memory: 96 GB
@nx/angular-rspackversion: 20.6.2- Angular version: ~19.2.0
| Build/Bundler | Prod SSR (s) | Prod (s) | Dev (s) |
|---|---|---|---|
| Webpack | 198.614 | 154.339 | 159.436 |
| esbuild | 23.701 | 19.569 | 15.358 |
| Rsbuild | 23.949 | 20.490 | 18.209 |
| Rspack | 30.589 | 19.269 | 19.940 |
You can find the benchmarks and run them yourself: https://github.com/nrwl/ng-bundler-benchmark
As can be seen by the benchmarks above, Rspack is significantly faster than Webpack and very close to Esbuild.
Given that the primary goal for Angular Rspack is to provide a faster build system for Angular Webpack applications while supporting their existing Webpack configurations and plugins, we are confident that Angular Rspack will be a great choice for teams that want to migrate to a faster build system.
Known Limitations and Missing Features
The following are known limitations and missing features of Angular Rspack:
- Static Site Generation (SSG) is not supported.
- Angular's built-in support for Internationalization (i18n) is not 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-criticalandremove-special-commentsare not yet implemented. - Inlining of fonts is not yet implemented.
- Styles optimization for
- Web Workers are not fully supported.
- Hot Module Replacement (HMR) is partially supported.
If you have any other missing features or limitations, please let us know.
What's Next?
We are actively working on improving the experience, stability and performance of Angular Rspack. Our next steps will revolve around getting to feature parity with Angular's build system - addressing the items listed above to achieve this.
The @nx/angular plugin will also be updated to support generating new Angular Rspack applications as well as supporting Rspack Module Federation with Angular.
Exciting times ahead! You can follow our progress by starring the Angular Rspack repository and following us on X.
