> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nrwl/nx/llms.txt
> Use this file to discover all available pages before exploring further.
# @nx/angular
> The Angular plugin for Nx provides generators, executors, and utilities for managing Angular applications and libraries within an Nx workspace.
The `@nx/angular` plugin integrates Angular into your Nx workspace. It extends the Angular CLI with Nx's monorepo capabilities, including incremental builds, affected commands, and distributed task execution. It is compatible with Angular schematics and supports NgRx, Module Federation, SSR, and Storybook.
## Installation
```bash theme={null}
nx add @nx/angular
```
Or install manually:
```bash npm theme={null}
npm install --save-dev @nx/angular
```
```bash pnpm theme={null}
pnpm add --save-dev @nx/angular
```
```bash yarn theme={null}
yarn add --dev @nx/angular
```
`@nx/angular` requires Angular peer dependencies including `@angular-devkit/build-angular`, `@angular-devkit/core`, `@angular-devkit/schematics`, `@schematics/angular`, and `rxjs`. These are installed alongside Angular itself.
## What the plugin provides
Scaffold applications, libraries, components, directives, pipes, NgRx stores, Module Federation setups, and more.
Build, serve, and test Angular applications with esbuild, webpack, and ng-packagr.
Fully compatible with Angular CLI schematics. Run any `@schematics/angular` generator inside an Nx workspace.
## Generators
### application
Create a new Angular application.
```bash theme={null}
nx generate @nx/angular:application myapp
```
### library
Create an Angular library within the workspace. Libraries can be internal (imported by other projects) or publishable (distributed as npm packages).
```bash theme={null}
# Buildable internal library
nx generate @nx/angular:library mylib
# Publishable npm library
nx generate @nx/angular:library mylib --publishable --importPath=@myorg/mylib
```
### component
Generate an Angular component inside an existing project.
```bash theme={null}
nx generate @nx/angular:component MyComponent --project=mylib
```
### directive
Generate an Angular directive.
```bash theme={null}
nx generate @nx/angular:directive my-directive --project=mylib
```
### pipe
Generate an Angular pipe.
```bash theme={null}
nx generate @nx/angular:pipe my-pipe --project=mylib
```
### ngrx-feature-store
Add an NgRx feature store to an application or library.
```bash theme={null}
nx generate @nx/angular:ngrx-feature-store products --project=myapp --module=app.module.ts
```
### ngrx-root-store
Add an NgRx root store to an application.
```bash theme={null}
nx generate @nx/angular:ngrx-root-store --project=myapp --module=app.module.ts
```
### host
Generate a Module Federation host Angular application.
```bash theme={null}
nx generate @nx/angular:host shell --remotes=remote1,remote2
```
### remote
Generate a Module Federation remote Angular application.
```bash theme={null}
nx generate @nx/angular:remote remote1 --host=shell
```
### setup-ssr
Add Angular Universal (SSR) to an existing application.
```bash theme={null}
nx generate @nx/angular:setup-ssr myapp
```
### storybook-configuration
Add Storybook configuration to an Angular project.
```bash theme={null}
nx generate @nx/angular:storybook-configuration mylib
```
### web-worker
Create a Web Worker within an Angular application.
```bash theme={null}
nx generate @nx/angular:web-worker my-worker --project=myapp
```
### library-secondary-entry-point
Create a secondary entry point for a publishable Angular library, following the Angular Package Format.
```bash theme={null}
nx generate @nx/angular:library-secondary-entry-point --library=mylib --name=testing
```
### scam
Generate a component with an accompanying Single Component Angular Module (SCAM).
```bash theme={null}
nx generate @nx/angular:scam MyComponent --project=mylib
```
### convert-to-rspack
Convert an existing Angular webpack project to use Rspack for faster builds.
```bash theme={null}
nx generate @nx/angular:convert-to-rspack --project=myapp
```
## Executors
### application
Build an Angular application using esbuild with integrated SSR and prerendering support.
```json theme={null}
{
"targets": {
"build": {
"executor": "@nx/angular:application",
"options": {
"outputPath": "dist/myapp",
"index": "myapp/src/index.html",
"browser": "myapp/src/main.ts",
"tsConfig": "myapp/tsconfig.app.json"
}
}
}
}
```
### package
Build and package an Angular library following the Angular Package Format (APF). Drop-in replacement for `@angular-devkit/build-angular:ng-packagr` with added support for incremental builds.
```json theme={null}
{
"targets": {
"build": {
"executor": "@nx/angular:package",
"options": {
"project": "mylib/ng-package.json"
}
}
}
}
```
### ng-packagr-lite
Build an Angular library with incremental build support, producing ESM2022 bundles. Intended for buildable libraries in incremental build scenarios.
```json theme={null}
{
"targets": {
"build": {
"executor": "@nx/angular:ng-packagr-lite",
"options": {
"project": "mylib/ng-package.json"
}
}
}
}
```
### module-federation-dev-server
Serve a Module Federation host application (webpack-based) and specify which remotes to start.
```json theme={null}
{
"targets": {
"serve": {
"executor": "@nx/angular:module-federation-dev-server",
"options": {
"buildTarget": "shell:build",
"port": 4200
}
}
}
}
```
### unit-test
Run application unit tests. Requires Angular 21.0.0 or later.
```json theme={null}
{
"targets": {
"test": {
"executor": "@nx/angular:unit-test",
"options": {
"buildTarget": "myapp:build"
}
}
}
}
```
### extract-i18n
Extract i18n messages from Angular source code.
```json theme={null}
{
"targets": {
"extract-i18n": {
"executor": "@nx/angular:extract-i18n",
"options": {
"buildTarget": "myapp:build"
}
}
}
}
```
## Configuration examples
### Publishable library ng-package.json
```json theme={null}
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "src/index.ts"
},
"dest": "../../dist/mylib"
}
```
### Application project.json (esbuild)
```json theme={null}
{
"name": "myapp",
"targets": {
"build": {
"executor": "@nx/angular:application",
"options": {
"outputPath": "dist/myapp",
"index": "myapp/src/index.html",
"browser": "myapp/src/main.ts",
"tsConfig": "myapp/tsconfig.app.json",
"assets": ["myapp/src/favicon.ico", "myapp/src/assets"],
"styles": ["myapp/src/styles.css"]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all"
}
}
},
"serve": {
"executor": "@nx/angular:dev-server",
"configurations": {
"production": {
"buildTarget": "myapp:build:production"
},
"development": {
"buildTarget": "myapp:build:development"
}
},
"defaultConfiguration": "development"
}
}
}
```
## Angular CLI compatibility
`@nx/angular` is fully compatible with Angular CLI schematics. Any schematic from `@schematics/angular` works within an Nx workspace:
```bash theme={null}
nx generate @schematics/angular:service my-service --project=myapp
```
Use `nx generate` instead of `ng generate` to benefit from Nx's dry-run support, project graph updates, and task caching.