Skip to content
Nx Docs

Getting Started - Angular Rspack

This guide will walk you through setting up a new Angular Rspack application in Nx. By the end of this guide, you will have a new Angular application with Rspack configured.

There are two paths you can follow to get started with Angular Rspack in Nx:

  1. Create a new Nx Workspace with preconfigured Angular Rspack application
  2. Add an existing Angular Rspack application to an Nx Workspace

Create a new Nx Workspace with preconfigured Angular Rspack application

Section titled “Create a new Nx Workspace with preconfigured Angular Rspack application”

To create a new Nx Workspace with a preconfigured Angular Rspack application, run the following command:

Terminal window
// filename: ~/


NX   Let's create a new workspace [https://nx.dev/getting-started/intro]


✔ Which stack do you want to use? · angular
✔ Integrated monorepo, or standalone project? · integrated
✔ Application name · myorg
✔ Which bundler would you like to use? · rspack
✔ Default stylesheet format · css
✔ Do you want to enable Server-Side Rendering (SSR)? · No
✔ Which unit test runner would you like to use? · vitest
✔ Test runner to use for end to end (E2E) tests · playwright


NX   Creating your v20.8.0 workspace.

This command will create a new Nx Workspace with an Angular Rspack application in the myorg directory.

Add an existing Angular Rspack application to an Nx Workspace

Section titled “Add an existing Angular Rspack application to an Nx Workspace”

To add an existing Angular Rspack application to an Nx Workspace, run the following command:

npx nx g @nx/angular:app myapp --bundler=rspack

This command will add an Angular Rspack application to the myapp directory.

Working with the Angular Rspack application

Section titled “Working with the Angular Rspack application”

After generating the application, you will notice the following:

  • A rspack.config.ts file in the root of the project
  • The project.json file does not have a targets.build or targets.serve target

The rspack.config.ts file is a configuration file for Rspack. It contains the configuration options for Rspack and for Angular Rspack a helper createConfig function is used to map the options you would expect to set in the project.json or angular.json files to the Rspack configuration.

The project.json file does not contain the targets.build or targets.serve targets because Angular Rspack uses Nx's Inferred Tasks to build and serve your application with Rspack.

Building your Angular Rspack application

Section titled “Building your Angular Rspack application”

To build your Angular Rspack application, run the following command:

npx nx build myapp

This command will build your Angular Rspack application and output the results to the dist/browser directory.
If you are using the Angular Rspack application with Server-Side Rendering (SSR), the dist/server directory will contain the server files. The same nx build command will build both the client and server files.

Serving your Angular Rspack application

Section titled “Serving your Angular Rspack application”

To serve your Angular Rspack application, run the following command:

npx nx serve myapp

This command will serve your Angular Rspack application.
For Client-Side Rendering (CSR) applications, the default port is 4200. You can visit the application by navigating to http://localhost:4200 in your browser.

For Server-Side Rendering (SSR) applications, the default port is 4000. You can visit the application by navigating to http://localhost:4000 in your browser.

HMR is enabled by default so you can make changes to your application and see the changes in real-time.