Nx with Angular

Angular is a framework for building web applications, and Nx is the platform for scaling your Angular monorepo. Nx has first party support for Angular projects, so if you're familiar with the Angular CLI, ng, then the Nx CLI will feel very familiar. The @nx/angular plugin adds generators, 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 Angular monorepos. You can use Angular with Nx without the plugin and still get task caching, task orchestration, and the project graph.

Why Nx instead of the Angular CLI?

Nx does everything the Angular CLI does, and adds monorepo support, enforced module boundaries, task caching, and CI acceleration through Nx Cloud.

Feature	Angular CLI	Nx
Generate apps, components, services	✅	✅
Build, serve, and test projects	✅	✅
Automated updates with migrations	✅	✅ (Enhanced)
First-class monorepo support	❌	✅
Enforced module boundaries	❌	✅
Interactive project graph	❌	✅
Build and test only what is affected	❌	✅
Local and remote caching	❌	✅
Distributed task execution on CI	❌	✅
Self-healing CI	❌	✅

For a detailed comparison and migration notes, see Nx and the Angular CLI.

Requirements

The @nx/angular plugin supports the following package versions.

Package	Supported Versions
@angular/core	>= 20.0.0 < 23.0.0

Nx generators install the latest supported versions automatically when scaffolding new projects.

For older Nx versions, see the full Nx and Angular versions matrix.

Setup

Add to an existing workspace

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. Using nx add helps ensure the correct version is installed and configured.

nx add @nx/angular

Verify the plugin is active by inspecting an Angular project:

nx show project <your-app-name>

Look for build, serve, test, lint, or e2e targets generated from angular.json.

Create an Angular monorepo

Create a new workspace with an Angular application already set up:

npx create-nx-workspace@latest my-org --template=nrwl/angular-template

This scaffolds an Nx monorepo with an Angular app and Nx preconfigured for caching, task running, and CI. You grow the monorepo by generating more applications and libraries, organized by application and by domain:

• Directorymy-org/

  • Directoryapps/

    • Directorystore/

      • …
    • Directorystore-e2e/

      • …
  • Directorylibs/

    • Directoryproducts/

      • Directoryfeature-product-list/

        • …
      • Directorydata-access/

        • …
    • Directoryshared/

      • Directoryui/

        • …
  • nx.json
  • package.json
  • tsconfig.base.json

Learn Nx

For a guided, step-by-step walkthrough of building a monorepo with Nx, follow the Learn Nx tutorial.

Configure inferred Angular tasks

The @nx/angular/plugin plugin reads angular.json files that are next to a package.json. It registers every Angular project in the file as an Nx project and converts each Angular CLI builder target into an Nx task. Nx preserves the Angular target's configurations and default configuration, then derives cache inputs, outputs, dependencies, and continuous task settings from the configured builder.

Configure the plugin in the plugins array in nx.json:

nx.json

{
  "plugins": [
    {
      "plugin": "@nx/angular/plugin",
      "options": {
        "targetNamePrefix": "angular:"
      }
    }
  ]
}

Option	Type	Default	Description
targetNamePrefix	string	none	Prefix added to every target imported from angular.json, such as angular:build.

Omit targetNamePrefix to keep the target names from angular.json. Use include and exclude glob patterns on the plugin entry to scope which angular.json files it processes.

A target defaults plugin filter must use the exact identifier @nx/angular/plugin.

Wait for the dev server to be ready

A task that depends on a dev server target starts once the server task has started. To make it wait until the server accepts connections, set waitFor to ready on its dependsOn entry. It then waits for the target's readyWhen check, which depends on how the target runs the server:

• angular.json targets that use a dev server or SSR dev server builder get a check from @nx/angular/plugin. It runs when the task runs, reads the target from angular.json, and waits for the port. The port comes from the --port flag, then the target's port option, which a configuration can override, then 4200. For @angular/build:dev-server 22 or later, a set PORT environment variable replaces it, as it does in the builder.
• project.json targets that run a dev server builder as their executor, such as @angular/build:dev-server or @nx/angular:dev-server, need "readyWhen": { "signal": true }. Nx then reports the baseUrl that the builder returns. Generated targets include the setting, and a migration adds it to existing ones.
• Rspack applications get "readyWhen": { "signal": true } from @nx/rspack/plugin, and NgRspackPlugin reports the dev server's address once it listens. With SSR, the server in server.ts reports its own address instead, when it calls emitReadySignal from @nx/js/ready-signal, as generated SSR servers do.
• The serve-static target runs the @nx/web:file-server executor, which reports its address once it listens.

With the last three, the waiting task gets the reported address in the NX_READY_URL environment variable. A readyWhen on the target in targetDefaults or in the project configuration replaces the inferred check, and null turns it off. For the details, see signal readiness from the task.

Local development

Generate an Angular application

nx g @nx/angular:app apps/my-app

Nx configures the linter your workspace already uses and Playwright for e2e tests. Unit tests use Vitest on Angular 21 and later. Earlier versions use Jest. Read more of the options available for the application generator in the Angular application generators reference.

nx serve my-app
nx build my-app
nx test my-app
nx lint my-app
nx e2e my-app

Generate an Angular library

nx g @nx/angular:lib libs/my-lib

Nx configures the linter your workspace already uses. Unit tests use Vitest on Angular 21 and later. Earlier versions use Jest. Read more of the options available for the library generator in the Angular library generators reference.

There are also generators for setting up common items inside your projects, such as components and services:

nx g @nx/angular:component libs/my-lib/src/lib/my-component
nx g @nx/angular:service libs/my-lib/src/lib/my-service

nx test my-lib
nx lint my-lib

Buildable and publishable libraries

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 for details.

nx g @nx/angular:lib libs/my-lib --publishable --importPath=@my-org/my-lib

Set up micro frontends

Nx v24 removed the @nx/angular host and remote generators. For Angular micro frontends, use @angular-architects/native-federation, and keep Nx for caching and affected runs in CI. To move an existing Nx Module Federation setup, see migrate Angular Module Federation.

Structure your Angular monorepo

Split each application into small, focused libraries grouped by domain (for example products, checkout, shared/ui). Tag those libraries and enforce module boundaries to control which libraries can depend on each other. This keeps a growing monorepo maintainable and makes nx affected precise.

To decide how to split projects, see folder structure and project size. For a worked example of organizing Angular apps into feature, UI, data-access, and utility libraries, see Architecting Angular Applications.

Set up CI for your Angular monorepo

In CI, Nx runs nx affected to rebuild and retest only the projects a change touches. Connecting your workspace to Nx Cloud adds:

• Remote caching to share build and test results across your team and CI machines
• Workers to distribute your Angular builds, tests, and lint tasks across machines
• Self-healing CI to propose fixes for failed tasks directly in your editor or PR

Connect your workspace:

npx nx connect

For a complete pipeline, see Set up CI.

What's next

Set up CI with Nx Cloud Remote caching, Workers, and self-healing CI.

Learn Nx Tutorial Build a monorepo step-by-step with Nx.

Migrate from Angular CLI Move an existing Angular CLI project into Nx.

Tailwind CSS with Angular Add Tailwind CSS to Angular apps and libraries.

Angular Generators Reference All @nx/angular generators.

Angular Executors Reference All @nx/angular executors.