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.

Local development

Generate an Angular application

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

By default, Nx configures ESLint for linting, Jest for unit tests, and Cypress for e2e tests. 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

By default, Nx configures ESLint for linting, Jest for unit tests. Read more of the options available for the application 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 Module Federation

Nx includes generators for scaffolding Module Federation architectures with Angular. Generate a host application and its remotes in one command:

nx g @nx/angular:host apps/shell --remotes=products,checkout

See all options in the Angular host generators reference.

Add a remote to an existing host:

nx g @nx/angular:remote apps/login --host=shell

See all options in the Angular remote generators reference.

Pass --dynamic for dynamic federation (remotes resolved at runtime) or --ssr for server-side rendering with 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
• Nx Agents 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, Nx Agents, 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.

Dynamic Module Federation Load Angular remotes at runtime with dynamic federation.

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.