docs(nx-dev): tech intro page structure improvements (#34450)

Work on making a tech intro pages more consistent with each other and
focus on "answering the 80%" for the given technology.

Focusing on 
- Angular
- Maven/Gradle
- react
- TS
- Vite
- Vitest/Jest

The changes are based around answering the following, where each
"category" of page might have a different set of depth for the answer.

1. Why do I want to use this plugin?
- Plugins are considered fully optional and are aimed at providing
better DX for a technology, such as inferred setup, generators,
migrations.
- some plugins (like TSC) might have special call outs in some of this,
but generally the same for all plugins.
2. How do I use this plugin in my workspace?
  - also pretty commonly the "same" for all plugins in terms of "setup"
- where they differ is mostly for frameworks, e.g. Angular, React.
You're looking at setting up a project to use these tools
- For Build/Test tools you're looking at adding to an existing project,
or converting from one to another.
- Build/Test tools are "means to an end", so should callout if the goal
is tool + framework in a "new" context point to the framework based
plugin page. Otherwise, show adding to an existing project like React
project.
3. What do I need to know about using this plugin?
- understanding finer details of a plugin options, e.g. buildable &
publishable
  - extra generators for the plugin. e.g. "convert-to-swc"
- generally I like the idea of having a "CI considerations" where we
talk about CI setups that can help, e.g. options or batch mode etc.


closes DOC-407

---------

Co-authored-by: nx-cloud[bot] <71083854+nx-cloud[bot]@users.noreply.github.com>
Co-authored-by: barbados-clemens <barbados-clemens@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

Author: 4 people

astro-docs/src/content/docs/technologies/angular/introduction.mdoc

@@ -1,123 +1,142 @@
 ---
-title: Overview of the Nx Angular Plugin
-description: The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace.
+title: Angular Plugin for Nx
+description: Use @nx/angular to create, run, and maintain Angular applications and libraries in an Nx workspace.
 keywords: [angular]
 sidebar:
   label: Introduction
   order: 1
 filter: 'type:References'
 ---
 
-The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries
-within an Nx workspace. It also enables using Angular Devkit builders and schematics in Nx workspaces.
-
-Among other things, it provides:
-
-- Integration with libraries such as:
-  - Cypress
-  - ESLint
-  - Jest
-  - Playwright
-  - Storybook
-- Generators to help scaffold code quickly, including:
-  - Micro Frontends
-  - Libraries, both internal to your codebase and publishable to npm
-  - Projects with Tailwind CSS
-- Executors providing extra capabilities on top of the Angular Devkit builders:
-  - Provide ESBuild plugins
-  - Provide custom webpack configurations
-- Utilities for automatic workspace refactoring
-
-{% aside type="note" title="Currently using the Angular CLI?" %}
-You can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn
-more [here](/docs/technologies/angular/migration/angular).
-{% /aside %}
+[Angular](https://angular.dev) is a framework for building web applications. Nx has first party support for Angular projects. If you're familiar with the Angular CLI, `ng`, then Nx CLI will feel very familiar.
+The `@nx/angular` plugin adds [generators](#local-development), Angular CLI builder integration (executors) and migrations so you can run Angular tasks through Nx. With Nx, each project has its own configuration instead of a single `angular.json` file, making it more scalable for monorepos.
+You can use Angular with Nx without the plugin and still get [task caching](/docs/features/cache-task-results), [task orchestration](/docs/features/run-tasks), and the [project graph](/docs/features/explore-graph).
 
-## Setting Up @nx/angular
+See the [Nx and Angular versions matrix](/docs/technologies/angular/guides/angular-nx-version-matrix) to know which Nx version supports a given Angular version.
 
-### Installation
+## Setup
 
-{% aside type="note" title="Keep Nx Package Versions In Sync" %}
-Make sure to install the `@nx/angular` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/docs/guides/tips-n-tricks/keep-nx-versions-in-sync).
-{% /aside %}
+### Add to an existing workspace
 
-In any Nx workspace, you can install `@nx/angular` by running the following command:
+{% aside type="note" title="Keep Nx package versions in sync" %}
+Install the `@nx/angular` version that matches your `nx` version to avoid hard-to-debug errors. See [Keep Nx versions in sync](/docs/guides/tips-n-tricks/keep-nx-versions-in-sync).
+Using `nx add` helps ensure the correct version is installed and configured.
+{% /aside %}
 
 ```shell
 nx add @nx/angular
 ```
 
-This will install the correct version of `@nx/angular`.
+Verify the plugin is active by inspecting an Angular project:
+
+```shell
+nx show project <your-app-name>
+```
+
+Look for `build`, `serve`, `test`, `lint`, or `e2e` targets generated from `angular.json`.
+
+### Create a new workspace
 
-{% aside type="note" title="Angular Tutorial" %}
-For a full tutorial experience, follow the [Angular Monorepo Tutorial](/docs/getting-started/tutorials/angular-monorepo-tutorial)
+```shell
+npx create-nx-workspace my-org --template=nrwl/angular-template
+```
+
+{% aside type="tip" title="Angular Tutorial" %}
+For a guided walkthrough, follow the [Angular Monorepo Tutorial](/docs/getting-started/tutorials/angular-monorepo-tutorial).
 {% /aside %}
 
-## Using the Angular Plugin
+## Local Development
+
+### Generate an Angular Application
+
+```shell
+nx g @nx/angular:app apps/my-app
+```
+
+By default, Nx configures ESLint for linting, Jest for unit tests, and Cypress for e2e tests. Read more of the options available for the application generator in the [Angular application generators reference](/docs/technologies/angular/generators#application).
 
-### Generating an angular application
+```shell
+nx serve my-app
+nx build my-app
+nx test my-app
+nx lint my-app
+nx e2e my-app
+```
 
-It's straightforward to generate an Angular application:
+### Generate an Angular Library
 
 ```shell
-nx g @nx/angular:app apps/appName
+nx g @nx/angular:lib libs/my-lib
 ```
 
-By default, the application will be generated with:
+By default, Nx configures ESLint for linting, Jest for unit tests. Read more of the options available for the application generator in the [angular library generators reference](/docs/technologies/angular/generators#library).
 
-- ESLint as the linter.
-- Jest as the unit test runner.
-- Cypress as the E2E test runner.
+There are also generators for setting up common items inside your projects, such as components and services:
 
-We can then serve, build, test, lint, and run e2e tests on the application with the following commands:
+```shell
+nx g @nx/angular:component libs/my-lib/src/lib/my-component
+nx g @nx/angular:service libs/my-lib/src/lib/my-service
+```
 
 ```shell
-nx serve appName
-nx build appName
-nx test appName
-nx lint appName
-nx e2e appName
+nx test my-lib
+nx lint my-lib
 ```
 
-### Generating an angular library
+### Buildable and Publishable Libraries
 
-Generating an Angular library is very similar to generating an application:
+If you need libraries that build or publish, generate them with build output enabled and an import path. This creates build targets you can cache and run in CI.
+See [Set up incremental builds for Angular libraries](/docs/technologies/angular/guides/setup-incremental-builds-angular) for details.
 
 ```shell
-nx g @nx/angular:lib libs/libName
+nx g @nx/angular:lib libs/my-lib
 ```
 
-By default, the library will be generated with:
+### Set Up Module Federation
+
+Nx includes generators for scaffolding [Module Federation](/docs/technologies/module-federation/concepts/module-federation-and-nx) architectures with Angular. Generate a host application and its remotes in one command:
 
-- ESLint as the linter.
-- Jest as the unit test runner.
+```shell
+nx g @nx/angular:host apps/shell --remotes=products,checkout
+```
 
-We can then test and lint the library with the following commands:
+> See all options in the [Angular host generators reference](/docs/technologies/angular/generators#host).
+
+Add a remote to an existing host:
 
 ```shell
-nx test libName
-nx lint libName
+nx g @nx/angular:remote apps/login --host=shell
 ```
 
-Read more about:
+> See all options in the [Angular remote generators reference](/docs/technologies/angular/generators#remote).
 
-- [Creating Libraries](/docs/concepts/decisions/project-size)
-- [Library Types](/docs/concepts/decisions/project-dependency-rules)
-- [Buildable and Publishable Libraries](/docs/concepts/buildable-and-publishable-libraries)
+Pass `--dynamic` for [dynamic federation](/docs/technologies/angular/guides/dynamic-module-federation-with-angular) (remotes resolved at runtime) or `--ssr` for [server-side rendering with Module Federation](/docs/technologies/angular/guides/module-federation-with-ssr).
 
-### Fallback to `@schematics/angular`
+## CI Considerations
 
-If you try to invoke a generator that is not present in `@nx/angular`, the request will automatically be forwarded on
-to `@schematics/angular`. So, even though there is no `@nx/angular:service` generator, the following command will
-successfully create a service:
+Run only what changed using the project graph:
 
 ```shell
-nx g @nx/angular:service apps/appName/src/lib/my-service/my-service
+nx affected -t build test lint e2e
 ```
 
-## More Documentation
+Enable remote caching for faster CI runs:
+
+```shell
+nx connect
+```
+
+If you use Angular CLI configurations, define a `ci` configuration in `angular.json` and run tasks with `--configuration=ci` for CI-specific settings.
+
+See [Set Up CI](/docs/guides/nx-cloud/setup-ci) for a sample CI setup.
+
+## What's Next
 
-- [Angular Monorepo Tutorial](/docs/getting-started/tutorials/angular-monorepo-tutorial)
-- [Migrating from the Angular CLI](/docs/technologies/angular/migration/angular)
-- [Setup Module Federation with Angular and Nx](/docs/technologies/module-federation/concepts/faster-builds-with-module-federation)
-- [Using Tailwind CSS with Angular projects](/docs/technologies/angular/guides/using-tailwind-css-with-angular-projects)
+{% cardgrid %}
+{% linkcard title="Angular Monorepo Tutorial" description="Build an Angular monorepo step-by-step with Nx." href="/docs/getting-started/tutorials/angular-monorepo-tutorial" /%}
+{% linkcard title="Migrate from Angular CLI" description="Move an existing Angular CLI project into Nx." href="/docs/technologies/angular/migration/angular" /%}
+{% linkcard title="Dynamic Module Federation" description="Load Angular remotes at runtime with dynamic federation." href="/docs/technologies/angular/guides/dynamic-module-federation-with-angular" /%}
+{% linkcard title="Tailwind CSS with Angular" description="Add Tailwind CSS to Angular apps and libraries." href="/docs/technologies/angular/guides/using-tailwind-css-with-angular-projects" /%}
+{% linkcard title="Angular Generators Reference" description="All @nx/angular generators." href="/docs/technologies/angular/generators" /%}
+{% linkcard title="Angular Executors Reference" description="All @nx/angular executors." href="/docs/technologies/angular/executors" /%}
+{% /cardgrid %}