84796d011e
## Current Behavior - Documentation pages under "technologies" and "core-api" sections with "introduction"/"overview" IDs lack H1 titles after front matter - Some remote caching package links point to parent sections instead of overview pages ## Expected Behavior - All affected documentation pages should have H1 titles for consistency - Links should point directly to overview pages ## Related Issue(s) Fixes # ## Changes Made ### 1. Updated Remote Caching Links (commit fae9055f8c) Updated links in 3 files to point directly to overview pages: - `docs/blog/2025-01-06-nx-update-20-3.md` - `docs/shared/deprecated/custom-tasks-runner.md` - `docs/shared/recipes/running-tasks/self-hosted-caching.md` Changed links from: - `/reference/core-api/azure-cache` → `/reference/core-api/azure-cache/overview` - `/reference/core-api/gcs-cache` → `/reference/core-api/gcs-cache/overview` - `/reference/core-api/s3-cache` → `/reference/core-api/s3-cache/overview` - `/reference/core-api/shared-fs-cache` → `/reference/core-api/shared-fs-cache/overview` ### 2. Added H1 Titles to Documentation Pages Added H1 titles to 29 documentation files that were missing them: #### Core API Overview Pages (6 files) - `docs/shared/packages/azure-cache/azure-cache-plugin.md` → `# @nx/azure-cache` - `docs/shared/packages/conformance/conformance-plugin.md` → `# @nx/conformance` - `docs/shared/packages/gcs-cache/gcs-cache-plugin.md` → `# @nx/gcs-cache` - `docs/shared/packages/owners/owners-plugin.md` → `# @nx/owners` - `docs/shared/packages/s3-cache/s3-cache-plugin.md` → `# @nx/s3-cache` - `docs/shared/packages/shared-fs-cache/shared-fs-cache-plugin.md` → `# @nx/shared-fs-cache` #### Technology Introduction Pages (23 files) - `docs/shared/packages/angular/angular-plugin.md` → `# @nx/angular` - `docs/shared/packages/esbuild/esbuild-plugin.md` → `# @nx/esbuild` - `docs/shared/packages/rspack/rspack-plugin.md` → `# @nx/rspack` - `docs/shared/packages/vite/vite-plugin.md` → `# @nx/vite` - `docs/shared/packages/webpack/plugin-overview.md` → `# @nx/webpack` - `docs/shared/packages/eslint/eslint.md` → `# @nx/eslint` - `docs/shared/packages/gradle/gradle-plugin.md` → `# @nx/gradle` - `docs/shared/packages/express/express-plugin.md` → `# @nx/express` - `docs/shared/packages/node/node-plugin.md` → `# @nx/node` - `docs/shared/packages/nest/nest-plugin.md` → `# @nx/nest` - `docs/shared/packages/expo/expo-plugin.md` → `# @nx/expo` - `docs/shared/packages/react/react-plugin.md` → `# @nx/react` - `docs/shared/packages/next/plugin-overview.md` → `# @nx/next` - `docs/shared/packages/react-native/react-native-plugin.md` → `# @nx/react-native` - `docs/shared/packages/remix/remix-plugin.md` → `# @nx/remix` - `docs/shared/packages/cypress/cypress-plugin.md` → `# @nx/cypress` - `docs/shared/packages/detox/detox-plugin.md` → `# @nx/detox` - `docs/shared/packages/jest/jest-plugin.md` → `# @nx/jest` - `docs/shared/packages/playwright/playwright-plugin.md` → `# @nx/playwright` - `docs/shared/packages/storybook/plugin-overview.md` → `# @nx/storybook` - `docs/shared/packages/js/js-plugin.md` → `# @nx/js` - `docs/shared/packages/vue/vue-plugin.md` → `# @nx/vue` - `docs/shared/packages/nuxt/nuxt-plugin.md` → `# @nx/nuxt` Note: The Angular Rspack introduction page (`docs/shared/guides/angular-rspack/introduction.md`) already had an appropriate H1 title "# Introduction" and was left unchanged. All changes improve documentation consistency and navigation by ensuring proper titles and direct links to overview pages.
122 lines
3.8 KiB
Markdown
122 lines
3.8 KiB
Markdown
---
|
|
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.
|
|
keywords: [angular]
|
|
---
|
|
|
|
# @nx/angular
|
|
|
|
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
|
|
|
|
{% callout 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](technologies/angular/migration/angular).
|
|
{% /callout %}
|
|
|
|
## Setting Up @nx/angular
|
|
|
|
### Installation
|
|
|
|
{% callout 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](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
|
|
{% /callout %}
|
|
|
|
In any Nx workspace, you can install `@nx/angular` by running the following command:
|
|
|
|
```shell {% skipRescope=true %}
|
|
nx add @nx/angular
|
|
```
|
|
|
|
This will install the correct version of `@nx/angular`.
|
|
|
|
{% callout type="note" title="Angular Tutorial" %}
|
|
For a full tutorial experience, follow the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
|
{% /callout %}
|
|
|
|
## Using the Angular Plugin
|
|
|
|
### Generating an application
|
|
|
|
It's straightforward to generate an Angular application:
|
|
|
|
```shell
|
|
nx g @nx/angular:app apps/appName
|
|
```
|
|
|
|
By default, the application will be generated with:
|
|
|
|
- ESLint as the linter.
|
|
- Jest as the unit test runner.
|
|
- Cypress as the E2E test runner.
|
|
|
|
We can then serve, build, test, lint, and run e2e tests on the application with the following commands:
|
|
|
|
```shell
|
|
nx serve appName
|
|
nx build appName
|
|
nx test appName
|
|
nx lint appName
|
|
nx e2e appName
|
|
```
|
|
|
|
### Generating a library
|
|
|
|
Generating an Angular library is very similar to generating an application:
|
|
|
|
```shell
|
|
nx g @nx/angular:lib libs/libName
|
|
```
|
|
|
|
By default, the library will be generated with:
|
|
|
|
- ESLint as the linter.
|
|
- Jest as the unit test runner.
|
|
|
|
We can then test and lint the library with the following commands:
|
|
|
|
```shell
|
|
nx test libName
|
|
nx lint libName
|
|
```
|
|
|
|
Read more about:
|
|
|
|
- [Creating Libraries](/concepts/decisions/project-size)
|
|
- [Library Types](/concepts/decisions/project-dependency-rules)
|
|
- [Buildable and Publishable Libraries](/concepts/buildable-and-publishable-libraries)
|
|
|
|
### Fallback to `@schematics/angular`
|
|
|
|
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:
|
|
|
|
```shell
|
|
nx g @nx/angular:service apps/appName/src/lib/my-service/my-service
|
|
```
|
|
|
|
## More Documentation
|
|
|
|
- [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
|
- [Migrating from the Angular CLI](technologies/angular/migration/angular)
|
|
- [Setup Module Federation with Angular and Nx](/technologies/module-federation/concepts/faster-builds-with-module-federation)
|
|
- [Using Tailwind CSS with Angular projects](/technologies/angular/recipes/using-tailwind-css-with-angular-projects)
|