Angular Rspack and Rsbuild Tools

---

Build Angular with Rspack and Rsbuild

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

Rsbuild Support

Thank you to Brandon Roberts and Analog for their work on building Angular applications with Vite which both inspired this plugin and provided a basis for the compilation implementation.

Currently, the Rsbuild support is more feature complete than the Rspack support. There exists an Rsbuild plugin that can be used with a rsbuild.config.ts file to support compiling Angular applications with Rsbuild.

Setup for SSR Application

Prerequisites: Angular SSR Application already created with ng new --ssr.

1. Install Rsbuild: npm install --save-dev @rsbuild/core
2. Install this plugin: npm install --save-dev @ng-rsbuild/plugin-angular
3. Create an rsbuild.config.ts file at the root of your project with the following:

import { createConfig } from '@ng-rsbuild/plugin-angular';

export default createConfig({
  browser: './src/main.ts',
  server: './src/main.server.ts',
  ssrEntry: './src/server.ts',
});

4. Update your ./src/server.ts file to use the createServer util:

import { createServer } from '@ng-rsbuild/plugin-angular/ssr';
import bootstrap from './main.server';

const server = createServer(bootstrap);

/** Add your custom server logic here
 *
 * For example, you can add a custom static file server:
 *
 * server.app.use('/static', express.static(staticFolder));
 *
 * Or add additional api routes:
 *
 * server.app.get('/api/hello', (req, res) => {
 *   res.send('Hello World!');
 * });
 *
 * Or add additional middleware:
 *
 * server.app.use((req, res, next) => {
 *   res.send('Hello World!');
 * });
 */

server.listen();

5. Run the builds: npx rsbuild build
6. Run the server: node dist/server/server.js
7. Run the dev server: npx rsbuild dev

Setup for CSR Application

Prerequisites: Angular CSR Application already created with ng new.

1. Install Rsbuild: npm install --save-dev @rsbuild/core
2. Install this plugin: npm install --save-dev @ng-rsbuild/plugin-angular
3. Create an rsbuild.config.ts file at the root of your project with the following:

import { createConfig } from '@ng-rsbuild/plugin-angular';

export default createConfig({
  browser: './src/main.ts',
});

4. Run the builds: npx rsbuild build
5. Run the dev server: npx rsbuild dev

Rspack Support

Current Status: POC

Currently, this is still being viewed as a proof-of-concept.

There needs to be a lot more comprehensive testing before this is viable for real applications.

Current Objective: HMR

The current objective is to get HMR working correctly.

Right now, the state of it is as follows:

• The global ng module is missing, causing warnings when HMR updates are applied.
• Only changes to the following cause an HMR update:
  • Global Styles
  • Inline Templates
  • TS portion of Components
• The following need support (non-exhaustive):
  • Inline Styles
  • Template Files
  • Component Style Files

Getting started with @ng-rspack/nx

# Create a new nx workspace
npx create-nx-workspace ng-rspack-test
# Choose options:
# - Stack: None
# - Integrated Monorepo
# - CI: Do it later
# - Remote caching: Up to you

# Change into project directory and install the ng-rspack-build package
cd ng-rspack-test
npm install @ng-rspack/nx

# Run the app generator
npx nx g @ng-rspack/nx:app apps/myapp
# Choose stylesheet format and e2e framework

# Serve the app
npx nx serve myapp

# Build the app
npx nx build myapp

# Run the e2e tests
npx nx e2e myapp-e2e