@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

nx add @nx/angular

Or install manually:

npm

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.