Getting Started
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:
- Create a new Nx Workspace with preconfigured Angular Rspack application
- Add an existing Angular Rspack application to an Nx Workspace
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:
~/❯
npx create-nx-workspace myorg
1
2NX Let's create a new workspace [[https://nx.dev/getting-started/intro](https://nx.dev/getting-started/intro)]
3
4✔ Which stack do you want to use? · angular
5✔ Integrated monorepo, or standalone project? · integrated
6✔ Application name · myorg
7✔ Which bundler would you like to use? · rspack
8✔ Default stylesheet format · css
9✔ Do you want to enable Server-Side Rendering (SSR)? · No
10✔ Which unit test runner would you like to use? · vitest
11✔ Test runner to use for end to end (E2E) tests · playwright
12
13NX Creating your v20.8.0 workspace.
14
15This 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
To add an existing Angular Rspack application to an Nx Workspace, run the following command:
The minimum Nx version required to add an Angular Rspack application to an Nx Workspace is 20.6.1. If you are using an older version of Nx, run npx nx migrate to migrate your workspace to the latest version.
You can learn more about Nx migrations here.
1npx nx g @nx/angular:app myapp --bundler=rspack
2This command will add an Angular Rspack application to the myapp directory.
Working with the Angular Rspack application
After generating the application, you will notice the following:
- A
rspack.config.tsfile in the root of the project - The
project.jsonfile does not have atargets.buildortargets.servetarget
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
To build your Angular Rspack application, run the following command:
1npx nx build myapp
2This 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
To serve your Angular Rspack application, run the following command:
1npx nx serve myapp
2This 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.