docs(angular): add getting started document for angular-rspack (#30767)

## Current Behavior
There is no Getting Started document for helping people to get up and
running quickly with Angular Rspack applications.
There is only a blog post about scaffolding the applications.

## Expected Behavior
Add a Getting Started document to help people get up and running

docs/generated/manifests/menus.json

@@ -1550,6 +1550,14 @@
                     "children": [],
                     "disableCollapsible": false
                   },
+                  {
+                    "name": "Getting Started",
+                    "path": "/recipes/angular/rspack/getting-started",
+                    "id": "getting-started",
+                    "isExternal": false,
+                    "children": [],
+                    "disableCollapsible": false
+                  },
                   {
                     "name": "Migrate from Angular Webpack",
                     "path": "/recipes/angular/rspack/migrate-from-webpack",
@@ -3052,6 +3060,14 @@
                 "children": [],
                 "disableCollapsible": false
               },
+              {
+                "name": "Getting Started",
+                "path": "/recipes/angular/rspack/getting-started",
+                "id": "getting-started",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
               {
                 "name": "Migrate from Angular Webpack",
                 "path": "/recipes/angular/rspack/migrate-from-webpack",
@@ -3161,6 +3177,14 @@
             "children": [],
             "disableCollapsible": false
           },
+          {
+            "name": "Getting Started",
+            "path": "/recipes/angular/rspack/getting-started",
+            "id": "getting-started",
+            "isExternal": false,
+            "children": [],
+            "disableCollapsible": false
+          },
           {
             "name": "Migrate from Angular Webpack",
             "path": "/recipes/angular/rspack/migrate-from-webpack",
@@ -3196,6 +3220,14 @@
         "children": [],
         "disableCollapsible": false
       },
+      {
+        "name": "Getting Started",
+        "path": "/recipes/angular/rspack/getting-started",
+        "id": "getting-started",
+        "isExternal": false,
+        "children": [],
+        "disableCollapsible": false
+      },
       {
         "name": "Migrate from Angular Webpack",
         "path": "/recipes/angular/rspack/migrate-from-webpack",

docs/generated/manifests/nx.json

@@ -2122,6 +2122,17 @@
                 "path": "/recipes/angular/rspack/introduction",
                 "tags": ["introduction"]
               },
+              {
+                "id": "getting-started",
+                "name": "Getting Started",
+                "description": "",
+                "mediaImage": "",
+                "file": "shared/guides/angular-rspack/getting-started",
+                "itemList": [],
+                "isExternal": false,
+                "path": "/recipes/angular/rspack/getting-started",
+                "tags": ["getting-started", "angular", "rspack", "setup"]
+              },
               {
                 "id": "migrate-from-webpack",
                 "name": "Migrate from Angular Webpack",
@@ -4181,6 +4192,17 @@
             "path": "/recipes/angular/rspack/introduction",
             "tags": ["introduction"]
           },
+          {
+            "id": "getting-started",
+            "name": "Getting Started",
+            "description": "",
+            "mediaImage": "",
+            "file": "shared/guides/angular-rspack/getting-started",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/recipes/angular/rspack/getting-started",
+            "tags": ["getting-started", "angular", "rspack", "setup"]
+          },
           {
             "id": "migrate-from-webpack",
             "name": "Migrate from Angular Webpack",
@@ -4331,6 +4353,17 @@
         "path": "/recipes/angular/rspack/introduction",
         "tags": ["introduction"]
       },
+      {
+        "id": "getting-started",
+        "name": "Getting Started",
+        "description": "",
+        "mediaImage": "",
+        "file": "shared/guides/angular-rspack/getting-started",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/recipes/angular/rspack/getting-started",
+        "tags": ["getting-started", "angular", "rspack", "setup"]
+      },
       {
         "id": "migrate-from-webpack",
         "name": "Migrate from Angular Webpack",
@@ -4380,6 +4413,17 @@
     "path": "/recipes/angular/rspack/introduction",
     "tags": ["introduction"]
   },
+  "/recipes/angular/rspack/getting-started": {
+    "id": "getting-started",
+    "name": "Getting Started",
+    "description": "",
+    "mediaImage": "",
+    "file": "shared/guides/angular-rspack/getting-started",
+    "itemList": [],
+    "isExternal": false,
+    "path": "/recipes/angular/rspack/getting-started",
+    "tags": ["getting-started", "angular", "rspack", "setup"]
+  },
   "/recipes/angular/rspack/migrate-from-webpack": {
     "id": "migrate-from-webpack",
     "name": "Migrate from Angular Webpack",

docs/generated/manifests/tags.json

@@ -888,6 +888,13 @@
       "name": "Faster Builds with Module Federation",
       "path": "/concepts/module-federation/faster-builds-with-module-federation"
     },
+    {
+      "description": "",
+      "file": "shared/guides/angular-rspack/getting-started",
+      "id": "getting-started",
+      "name": "Getting Started",
+      "path": "/recipes/angular/rspack/getting-started"
+    },
     {
       "description": "",
       "file": "shared/recipes/module-federation-with-ssr",
@@ -1096,6 +1103,33 @@
       "path": "/recipes/angular/rspack/introduction"
     }
   ],
+  "getting-started": [
+    {
+      "description": "",
+      "file": "shared/guides/angular-rspack/getting-started",
+      "id": "getting-started",
+      "name": "Getting Started",
+      "path": "/recipes/angular/rspack/getting-started"
+    }
+  ],
+  "rspack": [
+    {
+      "description": "",
+      "file": "shared/guides/angular-rspack/getting-started",
+      "id": "getting-started",
+      "name": "Getting Started",
+      "path": "/recipes/angular/rspack/getting-started"
+    }
+  ],
+  "setup": [
+    {
+      "description": "",
+      "file": "shared/guides/angular-rspack/getting-started",
+      "id": "getting-started",
+      "name": "Getting Started",
+      "path": "/recipes/angular/rspack/getting-started"
+    }
+  ],
   "migrate-from-webpack": [
     {
       "description": "",

docs/map.json

@@ -726,6 +726,12 @@
                       "tags": ["introduction"],
                       "file": "shared/guides/angular-rspack/introduction"
                     },
+                    {
+                      "name": "Getting Started",
+                      "id": "getting-started",
+                      "tags": ["getting-started", "angular", "rspack", "setup"],
+                      "file": "shared/guides/angular-rspack/getting-started"
+                    },
                     {
                       "name": "Migrate from Angular Webpack",
                       "id": "migrate-from-webpack",

docs/shared/guides/angular-rspack/getting-started.md

@@ -0,0 +1,132 @@
+---
+title: 'Getting Started - Angular Rspack'
+description: 'Learn how to get started with Angular Rspack applications in Nx.'
+---
+
+# 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:
+
+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
+
+To create a new Nx Workspace with a preconfigured Angular Rspack application, run the following command:
+
+{% tabs %}
+{% tab label="Client-Side Rendering (CSR)" %}
+
+```{% command="npx create-nx-workspace myorg" path="~/" %} {% highlightLines=[7,9] %}
+
+NX   Let's create a new workspace [[https://nx.dev/getting-started/intro](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.
+
+```
+
+{%/tab %}
+{% tab label="Server-Side Rendering (SSR)" %}
+
+```{% command="npx create-nx-workspace myorg" path="~/" %} {% highlightLines=[7,9] %}
+
+NX   Let's create a new workspace [[https://nx.dev/getting-started/intro](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)? · Yes
+✔ 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.
+
+```
+
+{% /tab %}
+{% /tabs %}
+
+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
+
+To add an existing Angular Rspack application to an Nx Workspace, run the following command:
+
+{% callout type="info" title="Minimum Nx Version" %}
+
+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](/features/automate-updating-dependencies).
+
+{% /callout %}
+
+{% tabs %}
+{% tab label="Client-Side Rendering (CSR)" %}
+
+```bash
+npx nx g @nx/angular:app myapp --bundler=rspack
+```
+
+{% /tab %}
+{% tab label="Server-Side Rendering (SSR)" %}
+
+```bash
+npx nx g @nx/angular:app myapp --bundler=rspack --ssr
+```
+
+{% /tab %}
+{% /tabs %}
+
+This 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.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](/nx-api/angular-rspack/documents/create-config)
+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](concepts/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:
+
+```bash
+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
+
+To serve your Angular Rspack application, run the following command:
+
+```bash
+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.

docs/shared/guides/angular-rspack/introduction.md

@@ -1,5 +1,5 @@
 ---
-title: 'Introduction - Angular Rspack and Rsbuild'
+title: 'Introduction - Angular Rspack'
 description: 'Learn how Rspack can help you speed up your Angular applications.'
 ---
 
@@ -17,18 +17,16 @@ This succeeded in reducing the build times for Angular applications, however, it
 
 ---
 
-## Rspack and Rsbuild
+## Rspack
 
 The solution to this problem was to create a new build pipeline that would be able to leverage the existing Webpack ecosystem and plugins, while also providing faster builds for Angular applications.
 
-This is where [Rspack](https://rspack.dev) and [Rsbuild](https://rsbuild.dev) come into play.
+This is where [Rspack](https://rspack.dev) come into play.
 
 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.
 
-Rsbuild is a build tool based on Rspack, however it does not support the Webpack ecosystem. It does provide out-of-the-box (OOTB) Module Federation support and a plugin system for extending the build with build speeds comparable to Esbuild.
-
 This makes it a great solution for teams that want to migrate to a faster build pipeline, but still want the ability to easily extend their builds and use [Module Federation](https://module-federation.io).
 
 {% callout type="warning" title="Angular Rspack Status" %}
@@ -68,7 +66,6 @@ Below is a table of benchmarks for different bundlers, tested on an application
 | ------------- | ------------ | -------- | ------- |
 | 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](https://github.com/nrwl/ng-bundler-benchmark)

docs/shared/reference/sitemap.md

@@ -113,6 +113,7 @@
     - [Angular](/recipes/angular)
       - [Angular Rspack](/recipes/angular/rspack)
         - [Introduction](/recipes/angular/rspack/introduction)
+        - [Getting Started](/recipes/angular/rspack/getting-started)
         - [Migrate from Angular Webpack](/recipes/angular/rspack/migrate-from-webpack)
         - [Handling Configurations](/recipes/angular/rspack/handling-configurations)
         - [Internationalization (i18n)](/recipes/angular/rspack/internationalization)