Angular Plugin for Nx

Angular is a framework for building web applications. Nx has first party support for Angular projects. If you're familiar with the Angular CLI, ng, then 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 monorepos. You can use Angular with Nx without the plugin and still get task caching, task orchestration, and the project graph.

See the Nx and Angular versions matrix to know which Nx version supports a given Angular version.

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 a new workspace

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

Angular Tutorial

For a guided walkthrough, follow the Angular Monorepo 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

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.

CI Considerations

Run only what changed using the project graph:

nx affected -t build test lint e2e

Enable remote caching for faster CI runs:

nx connect

If you use Angular CLI configurations, define a ci configuration in angular.json and run tasks with --configuration=ci for CI-specific settings.

See Set Up CI for a sample CI setup.

What's Next

Angular Monorepo Tutorial Build an Angular 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.