Skip to main content

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.

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

nx add @nx/angular
Or install manually: 
npm install --save-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

Generators

Scaffold applications, libraries, components, directives, pipes, NgRx stores, Module Federation setups, and more.

Executors

Build, serve, and test Angular applications with esbuild, webpack, and ng-packagr.

Schematics compatibility

Fully compatible with Angular CLI schematics. Run any @schematics/angular generator inside an Nx workspace.

​
Generators

​
application

Create a new Angular application. 
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). 
# 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. 
nx generate @nx/angular:component MyComponent --project=mylib

​
directive

Generate an Angular directive. 
nx generate @nx/angular:directive my-directive --project=mylib

​
pipe

Generate an Angular pipe. 
nx generate @nx/angular:pipe my-pipe --project=mylib

​
ngrx-feature-store

Add an NgRx feature store to an application or library. 
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. 
nx generate @nx/angular:ngrx-root-store --project=myapp --module=app.module.ts

​
host

Generate a Module Federation host Angular application. 
nx generate @nx/angular:host shell --remotes=remote1,remote2

​
remote

Generate a Module Federation remote Angular application. 
nx generate @nx/angular:remote remote1 --host=shell

​
setup-ssr

Add Angular Universal (SSR) to an existing application. 
nx generate @nx/angular:setup-ssr myapp

​
storybook-configuration

Add Storybook configuration to an Angular project. 
nx generate @nx/angular:storybook-configuration mylib

​
web-worker

Create a Web Worker within an Angular application. 
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. 
nx generate @nx/angular:library-secondary-entry-point --library=mylib --name=testing

​
scam

Generate a component with an accompanying Single Component Angular Module (SCAM). 
nx generate @nx/angular:scam MyComponent --project=mylib

​
convert-to-rspack

Convert an existing Angular webpack project to use Rspack for faster builds. 
nx generate @nx/angular:convert-to-rspack --project=myapp

​
Executors

​
application

Build an Angular application using esbuild with integrated SSR and prerendering support. 
{
  "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. 
{
  "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. 
{
  "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. 
{
  "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. 
{
  "targets": {
    "test": {
      "executor": "@nx/angular:unit-test",
      "options": {
        "buildTarget": "myapp:build"
      }
    }
  }
}

​
extract-i18n

Extract i18n messages from Angular source code. 
{
  "targets": {
    "extract-i18n": {
      "executor": "@nx/angular:extract-i18n",
      "options": {
        "buildTarget": "myapp:build"
      }
    }
  }
}

​
Configuration examples

​
Publishable library ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "src/index.ts"
  },
  "dest": "../../dist/mylib"
}

​
Application project.json (esbuild)

{
  "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: 
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us