Rescope @nrwl to @nx

@nx/angular

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
Currently using the Angular CLI?

You can easily and mostly automatically migrate from an Angular CLI project to Nx! Learn more here.

Setting Up @nx/angular

Installation

Keep Nx Package Versions In Sync

Make sure to install the @nx/angular version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.

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.

Angular Tutorials

For a full tutorial experience, follow the Angular Standalone Tutorial or the Angular Monorepo Tutorial

Using the Angular Plugin

Generating an application

It's straightforward to generate an Angular application:

❯

nx g @nx/angular:app 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 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

Read more about:

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 my-service

More Documentation

Package reference

Here is a list of all the executors and generators available from this package.

Guides

Executors

  • delegate-build

    Delegates the build to a different target while supporting incremental builds.

  • ng-packagr-lite

    Builds an Angular library with support for incremental builds.

    This executor is meant to be used with buildable libraries in an incremental build scenario. It is similar to the @nx/angular:package executor but with some key differences:

    • For supported Angular versions lower than v16, it doesn't run ngcc automatically (ngcc is no longer available from Angular v16 onwards, for lower versions, it needs to be run separately beforehand if needed, this can be done in a postinstall hook on package.json).
    • It only produces ESM2022 bundles (ESM2020 for supported Angular versions lower than v16).

  • package

    Builds and packages an Angular library producing an output following the Angular Package Format (APF) to be distributed as an NPM package.

    This executor is a drop-in replacement for the @angular-devkit/build-angular:ng-packagr with additional support for incremental builds.

  • browser-esbuild

    Builds an Angular application using esbuild.

  • module-federation-dev-server

    Serves host Module Federation applications (webpack-based) allowing to specify which remote applications should be served with the host.

  • application

    Builds an Angular application using esbuild with integrated SSR and prerendering capabilities. Note: this is only supported in Angular versions >= 17.0.0.

  • extract-i18n

    Extracts i18n messages from source code.

  • webpack-browser

    Builds an Angular application using webpack.

  • dev-server

    Serves an Angular application using webpack when the build target is using a webpack-based executor, or Vite when the build target uses an esbuild-based executor.

  • webpack-server

    Builds a server Angular application using webpack. This executor is a drop-in replacement for the @angular-devkit/build-angular:server builder provided by the Angular CLI. It is usually used in tandem with the @nx/angular:webpack-browser executor when your Angular application uses a custom webpack configuration.

  • module-federation-dev-ssr

    Serves host Module Federation applications (webpack-based) that use SSR allowing to specify which remote applications should be served with the host.

Generators

  • add-lintingInternal

    Adds linting configuration to an Angular project.

  • application

    Creates an Angular application.

  • component

    Generate an Angular Component.

  • component-cypress-specInternal

    Creates a Cypress spec for a UI component that has a story.

  • component-storyInternal

    Creates a stories.ts file for a component.

  • component-test

    Creates a cypress component test file for a component.

  • convert-to-application-executor

    Converts projects to use the @nx/angular:application executor or the @angular-devkit/build-angular:application builder. Note: this is only supported in Angular versions >= 17.0.0.

  • directive

    Generate an Angular directive.

  • federate-module

    Create a federated module, which is exposed by a remote and can be subsequently loaded by a host.

  • initInternal

    Initializes the @nrwl/angular plugin.

  • library

    Creates an Angular library.

  • library-secondary-entry-point

    Creates a secondary entry point for an Angular publishable library.

  • remote

    Generate a Remote Angular Module Federation Application.

  • move

    Moves an Angular application or library to another folder within the workspace and updates the project configuration.

  • convert-to-with-mf

    Converts an old micro frontend configuration to use the new withModuleFederation helper. It will run successfully if the following conditions are met:

    • Is either a host or remote application
    • Shared npm package configurations have not been modified
    • Name used to identify the Micro Frontend application matches the project name

    OverridesThis generator will overwrite your webpack config. If you have additional custom configuration in your config file, it will be lost!

  • host

    Generate a Host Angular Module Federation Application.

  • ng-addInternal

    Migrates an Angular CLI workspace to Nx or adds the Angular plugin to an Nx workspace.

  • ngrx

    Adds NgRx support to an application or library.

  • ngrx-feature-store

    Adds an NgRx Feature Store to an application or library.

  • ngrx-root-store

    Adds an NgRx Root Store to an application.

  • pipe

    Generate an Angular Pipe

  • scam-to-standalone

    Convert an existing Single Component Angular Module (SCAM) to a Standalone Component.

  • scam

    Generate a component with an accompanying Single Component Angular Module (SCAM).

  • scam-directive

    Generate a directive with an accompanying Single Component Angular Module (SCAM).

  • scam-pipe

    Generate a pipe with an accompanying Single Component Angular Module (SCAM).

  • setup-mf

    Generate a Module Federation configuration for a given Angular application.

  • setup-ssr

    Generate Angular Universal (SSR) setup for an Angular application.

  • setup-tailwind

    Configures Tailwind CSS for an application or a buildable/publishable library.

  • stories

    Creates stories/specs for all components declared in a project.

  • storybook-configuration

    Adds Storybook configuration to a project.

  • cypress-component-configuration

    Setup Cypress component testing for a project.

  • web-worker

    Creates a Web Worker.