{"id":15088311,"url":"https://github.com/Coly010/ng-rspack-build","last_synced_at":"2025-09-26T08:30:53.887Z","repository":{"id":257789770,"uuid":"860980022","full_name":"Coly010/ng-rspack-build","owner":"Coly010","description":"Rspack plugin and loaders to build Angular applications","archived":false,"fork":false,"pushed_at":"2025-03-05T11:37:17.000Z","size":2944,"stargazers_count":110,"open_issues_count":25,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-08-15T21:49:18.458Z","etag":null,"topics":["angular","rsbuild","rsbuild-plugin","rspack","rspack-angular"],"latest_commit_sha":null,"homepage":"https://angular-rspack.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Coly010.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-21T17:15:29.000Z","updated_at":"2025-07-24T14:37:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"da28f998-3613-49f1-b22c-2d4a7a16e94d","html_url":"https://github.com/Coly010/ng-rspack-build","commit_stats":null,"previous_names":["coly010/ng-rspack-build"],"tags_count":69,"template":false,"template_full_name":null,"purl":"pkg:github/Coly010/ng-rspack-build","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coly010%2Fng-rspack-build","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coly010%2Fng-rspack-build/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coly010%2Fng-rspack-build/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coly010%2Fng-rspack-build/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Coly010","download_url":"https://codeload.github.com/Coly010/ng-rspack-build/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coly010%2Fng-rspack-build/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275724492,"owners_count":25516692,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-18T02:00:09.552Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","rsbuild","rsbuild-plugin","rspack","rspack-angular"],"created_at":"2024-09-25T08:01:15.400Z","updated_at":"2025-09-26T08:30:53.880Z","avatar_url":"https://github.com/Coly010.png","language":"TypeScript","funding_links":[],"categories":["Table of contents","Plugins"],"sub_categories":["Angular","Rsbuild Plugins"],"readme":"---\n# THIS REPOSITORY HAS BEEN MOVED TO [NRWL/ANGULAR-RSPACK](HTTPS://GITHUB.COM/NRWL/ANGULAR-RSPACK). PLEASE USE THAT REPO FOR FURTHER UPDATES.\n---\n\n\n\n\u003cdiv style=\"text-align: center; margin: 0 auto;\"\u003e\n\n\u003cimg src=\"./rsbuild-plugin-angular.png\" alt=\"Rsbuild Plugin Angular\" /\u003e\n\n# Angular Rspack and Rsbuild Tools\n\n[![GitHub Actions](https://github.com/Coly010/ng-rspack-build/actions/workflows/ci.yml/badge.svg)](https://github.com/Coly010/ng-rspack-build/actions/workflows/ci.yml)\n![License](https://img.shields.io/badge/License-MIT-blue)\n\n[![NPM Version](https://img.shields.io/npm/v/%40ng-rsbuild%2Fplugin-angular?label=%40ng-rsbuild%2Fpluigin-angular)](https://www.npmjs.com/package/@ng-rsbuild/plugin-angular)\n[![NPM Version](https://img.shields.io/npm/v/%40ng-rsbuild%2Fplugin-nx?label=%40ng-rsbuild%2Fpluigin-nx)](https://www.npmjs.com/package/@ng-rsbuild/plugin-nx)\n[![NPM Version](https://img.shields.io/npm/v/%40ng-rspack%2Fbuild?label=%40ng-rspack%2Fbuild)](https://www.npmjs.com/package/@ng-rspack/build)\n[![NPM Version](https://img.shields.io/npm/v/%40ng-rspack%2Fbuild?label=%40ng-rspack%2Fnx)](https://www.npmjs.com/package/@ng-rspack/nx)\n\n\u003c/div\u003e\n\n\u003chr\u003e\n\n# Build Angular with Rspack and Rsbuild\n\nThe goal of `@ng-rsbuild/plugin-angular` and `@ng-rspack/build` is to make it easy and straightforward to build Angular applications with [Rspack](https://rspack.dev) and [Rsbuild](https://rsbuild.dev).\n\n## Feature Parity\n\nThe following aims to compare features of **Rspack** and **Rsbuild**, and it's Angular wrapper with **[Angular's standards](https://angular.dev/)** ([Angular CLI](https://github.com/angular/angular-cli) and [Webpack](https://webpack.js.org/)/[esbuild](https://esbuild.github.io/)).\n\nRspack and Rsbuild are modern, high-performance JavaScript build tools designed as alternatives to Webpack and other traditional bundlers.\n\n### 📌 Mapping ng-rspack \u0026 ng-rsbuild Packages to Angular CLI Components\n\nThis table maps the key `ng-rspack` and `ng-rsbuild` packages to their equivalent Angular CLI components to show how Rspack and Rsbuild replace or mirror Angular CLI's system.\n\n#### Package Comparison\n\n| ng-rspack / ng-rsbuild Package                                                                                   | New Equivalent in Angular CLI / DevKit                                                            | Old Equivalent in Angular CLI / DevKit                                                                    | Description                                                                                    |\n| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |\n| [@ng-rspack/build](https://github.com/Coly010/ng-rspack-build/tree/main/packages/build)                          | [@angular/build](https://github.com/angular/angular/tree/main/packages/build)                     | [@angular-devkit/build-angular](https://github.com/angular/angular-cli/tree/main/packages/angular_devkit) | Core build system for ng-rspack, replacing Angular CLI's Webpack-based builder.                |\n| [@ng-rspack/compiler](https://github.com/Coly010/ng-rspack-build/tree/main/packages/compiler)                    | [@angular/build](https://github.com/angular/angular/tree/main/packages/build)                     | [@angular/build](https://github.com/angular/angular/tree/main/packages/compiler)                          | Compiler for Angular applications using Rspack, leveraging abstractions from `@angular/build`. |\n| [@ng-rspack/nx](https://github.com/Coly010/ng-rspack-build/tree/main/packages/nx-plugin)                         | n/a ([@nx/angular](https://github.com/nrwl/nx/tree/master/packages/angular) as already 3rd party) | n/a ([@nx/angular](https://github.com/nrwl/nx/tree/master/packages/angular) as already 3rd party)         | Provides Nx integration for RsPack and RsBuild in Angular, like `@nx/angular` for Angular CLI. |\n| [@ng-rsbuild/plugin-angular](https://github.com/Coly010/ng-rspack-build/tree/main/packages/build-plugin-angular) | [@angular/build](https://github.com/angular/angular/tree/main/packages/build) (Builder API)       | [@angular-devkit/build-angular](https://github.com/angular/angular-cli/tree/main/packages/angular_devkit) | Rsbuild plugin for Angular projects, similar to Angular CLI's Webpack-based builder API.       |\n| [@ng-rsbuild/plugin-nx](https://github.com/Coly010/ng-rspack-build/tree/main/packages/build-plugin-nx)           | [@nx/angular](https://github.com/nrwl/nx/tree/master/packages/angular)                            | [@nx/angular](https://github.com/nrwl/nx/tree/master/packages/angular)                                    | Provides Nx integration for RsPack and RsBuild in Angular, like `@nx/angular` for Angular CLI. |\n\n### Feature Comparisons\n\n_Legend:_\n\n- ✅ Fully Supported\n- ⚠️ Partial Support\n- ❌ Not Supported\n- 🔘 Not Applicable\n- 🌟 Best-in-Class\n\n| Feature                                       | State | ng-rspack / ng-rsbuild Package                                                                                                                                                                             | State | New Equivalent (@angular/build)                                               | State | Old Equivalent (@angular-devkit)                                                                          | Notes                                                                                                                       |\n| --------------------------------------------- | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | ----------------------------------------------------------------------------- | ----- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| **Builder / Build Performance**               | ✅🌟  | [1] [Rspack](https://rspack.dev/) / [Rsbuild](https://github.com/web-infra-dev/rsbuild)                                                                                                                    | ✅    | [Angular Esbuild](https://angular.dev/guide/build#esbuild)                    | ⚠️    | [Webpack](https://webpack.js.org/)                                                                        | Rspack \u0026 Rsbuild (Rust-based) are optimized for performance. New Angular uses Esbuild, replacing Webpack for faster builds. |\n| **Plugins \u0026 Loaders**                         | ✅    | -                                                                                                                                                                                                          | ✅    | -                                                                             | ✅    | -                                                                                                         |                                                                                                                             |\n| - CSS Loader                                  | ✅    | [CSS Loader](https://rspack.dev/plugin/css/)                                                                                                                                                               | ✅    | [CSS Loader](https://webpack.js.org/loaders/css-loader/)                      | ✅    | [CSS Loader](https://webpack.js.org/loaders/css-loader/)                                                  |                                                                                                                             |\n| - SCSS/SASS Loader                            | ✅    | [SCSS Loader](https://rspack.dev/plugin/sass/)                                                                                                                                                             | ✅    | [SCSS Loader](https://webpack.js.org/loaders/sass-loader/)                    | ✅    | [SCSS Loader](https://webpack.js.org/loaders/sass-loader/)                                                |                                                                                                                             |\n| - LESS Loader                                 | ✅    | [LESS Loader](https://rspack.dev/plugin/less/)                                                                                                                                                             | ✅    | [LESS Loader](https://webpack.js.org/loaders/less-loader/)                    | ✅    | [LESS Loader](https://webpack.js.org/loaders/less-loader/)                                                |                                                                                                                             |\n| - Style Loader                                | 🚧    | [Style Loader](https://rspack.dev/plugin/style/)                                                                                                                                                           | ✅    | [Style Loader](https://webpack.js.org/loaders/style-loader/)                  | ✅    | [Style Loader](https://webpack.js.org/loaders/style-loader/)                                              |                                                                                                                             |\n| **Configuration File (Bundler)**              | ✅    | [Rspack Config (`rspack.config.js`)](https://rspack.dev/config/)                                                                                                                                           | ✅    | [Angular JSON (`angular.json`)](https://angular.dev/guide/workspace-config)   | ✅    | [Webpack Config (`webpack.config.js`)](https://webpack.js.org/configuration/)                             | Angular combines bundler and builder configs in one file (`angular.json`)                                                   |\n| **Configuration File (Builder)**              | ✅    | [Rsbuild Config (`rsbuild.config.ts`)](https://github.com/web-infra-dev/rsbuild)                                                                                                                           | ✅    | [Angular JSON (`angular.json`)](https://angular.dev/guide/workspace-config)   | ✅    | [Webpack Config (`webpack.config.js`)](https://webpack.js.org/configuration/)                             |                                                                                                                             |\n| **Compiler**                                  | ✅    | [@ng-rspack/compiler](https://github.com/Coly010/ng-rspack-build/tree/main/packages/compiler)                                                                                                              | ✅    | [@angular/build](https://github.com/angular/angular/tree/main/packages/build) | ✅    | [@angular/compiler](https://github.com/angular/angular/tree/main/packages/compiler)                       |                                                                                                                             |\n| **Automatic Downleveling via `browserslist`** | ❌    | -                                                                                                                                                                                                          | ✅    | -                                                                             | ✅    | -                                                                                                         | Can be supported via [Rspack Target](https://rspack.dev/config/target#browserslist)                                         |\n| **Build Flags (`NG_BUILD_MANGLE=0`, etc.)**   | ❌    | -                                                                                                                                                                                                          | ✅    | -                                                                             | ✅    | -                                                                                                         | No method to override SWC options                                                                                           |\n| **HMR (Hot Module Replacement)**              | ⚠️    | [@ng-rspack/build](https://github.com/Coly010/ng-rspack-build/tree/main/packages/build) [@ng-rsbuild/plugin-angular](https://github.com/Coly010/ng-rspack-build/tree/main/packages/rsbuild-plugin-angular) | ✅    | [@angular/build](https://github.com/angular/angular/tree/main/packages/build) | ✅    | [@angular-devkit/build-angular](https://github.com/angular/angular-cli/tree/main/packages/angular_devkit) |                                                                                                                             |\n| **TypeScript Handling**                       | ✅    | [Rspack SWC](https://rspack.dev/config/module#using-swc)                                                                                                                                                   | ✅    | [Angular Esbuild](https://angular.dev/guide/build#esbuild)                    | ✅    | [Webpack TypeScript](https://webpack.js.org/guides/typescript/)                                           | Rspack uses SWC, Angular uses Esbuild                                                                                       |\n| **Tree Shaking**                              | ✅    | -                                                                                                                                                                                                          | ✅    | -                                                                             | ✅    | -                                                                                                         |                                                                                                                             |\n| **Asset Management**                          | ✅    | -                                                                                                                                                                                                          | ✅    | -                                                                             | ✅    | -                                                                                                         |                                                                                                                             |\n| **Development Server**                        | ✅    | -                                                                                                                                                                                                          | ✅    | -                                                                             | ✅    | -                                                                                                         |                                                                                                                             |\n| **Schematics**                                | ⚠️    | -                                                                                                                                                                                                          | ✅    | -                                                                             | ✅    | -                                                                                                         |                                                                                                                             |\n| - Generate Application                        | ⚠️    | -                                                                                                                                                                                                          | ✅    | `ng generate app`                                                             | ✅    | `ng generate app`                                                                                         |                                                                                                                             |\n| - Serve Application                           | ✅    | -                                                                                                                                                                                                          | ✅    | `ng serve`                                                                    | ✅    | `ng serve`                                                                                                |                                                                                                                             |\n| - Build Application                           | ✅    | -                                                                                                                                                                                                          | ✅    | `ng build`                                                                    | ✅    | `ng build`                                                                                                |                                                                                                                             |\n| **Nx Plugin**                                 | ✅    | [@ng-rspack/plugin-nx](https://github.com/Coly010/ng-rspack-build/tree/main/packages/build-plugin-nx)                                                                                                      | 🔘    | [@nx/angular](https://github.com/nrwl/nx/tree/master/packages/angular)        | 🔘    | [@nx/angular](https://github.com/nrwl/nx/tree/master/packages/angular)                                    | Nx is a 3rd party                                                                                                           |\n| **Nx Integration**                            | ✅    | [@ng-rspack/nx](https://github.com/Coly010/ng-rspack-build/tree/main/packages/nx-plugin)                                                                                                                   | 🔘    | n/a                                                                           | 🔘    | n/a                                                                                                       | Already 3rd party ([`@nx/angular`](https://github.com/nrwl/nx/tree/master/packages/angular))                                |\n| **Migration from Webpack**                    | ✅    | -                                                                                                                                                                                                          | ⚠️    | -                                                                             | ⚠️    | -                                                                                                         | Rspack serves as a drop-in replacement for Webpack; Angular is transitioning to Esbuild                                     |\n\n- [1] For build speed comparison see [benchmarks](https://github.com/Coly010/ng-bundler-benchmark)\n\n---\n\n## Configuration\n\nConfiguration is **controlled entirely** via the **Rspack/Rsbuild config**.  \nBoth tools offer a `createConfig` function to **aid in the creation of the configuration**.\n\n- [Rspack Configuration Guide](https://www.rspack.dev/docs/config/)\n- [Rsbuild Configuration Guide](https://modern-js.dev/en/rsbuild/docs/config/)\n\n## Documentation\n\nThe documentation for this project can be found at [angular-rspack.dev](https://angular-rspack.dev).\n\n## Rsbuild Support\n\n**_Thank you to [Brandon Roberts](https://x.com/brandontroberts) and [Analog](https://analogjs.org/) for their work on building Angular applications with Vite which both inspired this plugin and provided a basis for the compilation implementation._**\n\nCurrently, the Rsbuild support is more feature complete than the Rspack support.\nThere exists an Rsbuild plugin that can be used with a `rsbuild.config.ts` file to support compiling Angular applications with Rsbuild.\n\n### Setup for SSR Application\n\n**Prerequisites**: Angular SSR Application already created with `ng new --ssr`.\n\n1. Install Rsbuild: `npm install --save-dev @rsbuild/core`\n2. Install this plugin: `npm install --save-dev @ng-rsbuild/plugin-angular`\n3. Create an `rsbuild.config.ts` file at the root of your project with the following:\n\n```ts\nimport { createConfig } from '@ng-rsbuild/plugin-angular';\n\nexport default createConfig({\n  browser: './src/main.ts',\n  server: './src/main.server.ts',\n  ssrEntry: './src/server.ts',\n});\n```\n\n4. Update your `./src/server.ts` file to use the `createServer` util:\n\n```ts\nimport { createServer } from '@ng-rsbuild/plugin-angular/ssr';\nimport bootstrap from './main.server';\n\nconst server = createServer(bootstrap);\n\n/** Add your custom server logic here\n *\n * For example, you can add a custom static file server:\n *\n * server.app.use('/static', express.static(staticFolder));\n *\n * Or add additional api routes:\n *\n * server.app.get('/api/hello', (req, res) =\u003e {\n *   res.send('Hello World!');\n * });\n *\n * Or add additional middleware:\n *\n * server.app.use((req, res, next) =\u003e {\n *   res.send('Hello World!');\n * });\n */\n\nserver.listen();\n```\n\n5. Run the builds: `npx rsbuild build`\n6. Run the server: `node dist/server/server.js`\n7. Run the dev server: `npx rsbuild dev`\n\n### Setup for CSR Application\n\n**Prerequisites**: Angular CSR Application already created with `ng new`.\n\n1. Install Rsbuild: `npm install --save-dev @rsbuild/core`\n2. Install this plugin: `npm install --save-dev @ng-rsbuild/plugin-angular`\n3. Create an `rsbuild.config.ts` file at the root of your project with the following:\n\n```ts\nimport { createConfig } from '@ng-rsbuild/plugin-angular';\n\nexport default createConfig({\n  browser: './src/main.ts',\n});\n```\n\n4. Run the builds: `npx rsbuild build`\n5. Run the dev server: `npx rsbuild dev`\n\n## Rspack Support\n\n### Current Status: POC\n\nCurrently, this is still being viewed as a proof-of-concept.\n\nThere needs to be a lot more comprehensive testing before this is viable for real applications.\n\n### Current Objective: HMR\n\nThe current objective is to get HMR working correctly.\n\nRight now, the state of it is as follows:\n\n- The global `ng` module is missing, causing warnings when HMR updates are applied.\n- Only changes to the following cause an HMR update:\n  - Global Styles\n  - Inline Templates\n  - TS portion of Components\n- The following need support (non-exhaustive):\n  - Inline Styles\n  - Template Files\n  - Component Style Files\n\n## Getting started with `@ng-rspack/nx`\n\n```bash\n# Create a new nx workspace\nnpx create-nx-workspace ng-rspack-test\n# Choose options:\n# - Stack: None\n# - Integrated Monorepo\n# - CI: Do it later\n# - Remote caching: Up to you\n\n# Change into project directory and install the ng-rspack-build package\ncd ng-rspack-test\nnpm install @ng-rspack/nx\n\n# Run the app generator\nnpx nx g @ng-rspack/nx:app apps/myapp\n# Choose stylesheet format and e2e framework\n\n# Serve the app\nnpx nx serve myapp\n\n# Build the app\nnpx nx build myapp\n\n# Run the e2e tests\nnpx nx e2e myapp-e2e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FColy010%2Fng-rspack-build","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FColy010%2Fng-rspack-build","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FColy010%2Fng-rspack-build/lists"}