Overview of the Nx Angular Plugin

The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It also enables using Angular Devkit builders and schematics in Nx workspaces.

Among other things, it provides:

Integration with libraries such as:
- Cypress
- ESLint
- Jest
- Playwright
- Storybook
Generators to help scaffold code quickly, including:
- Micro Frontends
- Libraries, both internal to your codebase and publishable to npm
- Projects with Tailwind CSS
Executors providing extra capabilities on top of the Angular Devkit builders:
- Provide ESBuild plugins
- Provide custom webpack configurations
Utilities for automatic workspace refactoring

Setting Up @nx/angular

Installation

In any Nx workspace, you can install @nx/angular by running the following command:

nx add @nx/angular

This will install the correct version of @nx/angular.

Using the Angular Plugin

Generating an application

It's straightforward to generate an Angular application:

nx g @nx/angular:app apps/appName

By default, the application will be generated with:

ESLint as the linter.
Jest as the unit test runner.
Cypress as the E2E test runner.

We can then serve, build, test, lint, and run e2e tests on the application with the following commands:

nx serve appName
nx build appName
nx test appName
nx lint appName
nx e2e appName

Generating a library

Generating an Angular library is very similar to generating an application:

nx g @nx/angular:lib libs/libName

By default, the library will be generated with:

ESLint as the linter.
Jest as the unit test runner.

We can then test and lint the library with the following commands:

nx test libName
nx lint libName

Fallback to `@schematics/angular`

If you try to invoke a generator that is not present in @nx/angular, the request will automatically be forwarded on to @schematics/angular. So, even though there is no @nx/angular:service generator, the following command will successfully create a service:

nx g @nx/angular:service apps/appName/src/lib/my-service/my-service