@nx/angular

Package reference

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

Guides

• Angular and Nx Version Matrix

Executors

• delegate-build

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

• ng-packagr-lite

  Builds a 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 @nrwl/angular:package executor but with some key differences:

  • It doesn't run ngcc automatically (ngcc needs to be run separately beforehand if needed, this can be done in a postinstall hook on package.json).
  • It only produces ESM2020 bundles.
  • It doesn't generate package exports in the package.json.
• 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 similar to the @angular-devkit/build-angular:ng-packagr with additional support for incremental builds.

• browser-esbuild

  Builds your application with esbuild and adds support for incremental builds.

• module-federation-dev-server

  The module-federation-dev-server executor is reserved exclusively for use with host Module Federation applications. It allows the user to specify which remote applications should be served with the host.

• application

  Builds an application with esbuild with support for incremental builds. Note: this is only supported in Angular versions >= 17.0.0.

• webpack-browser

  The webpack-browser executor is very similar to the standard browser builder provided by the Angular Devkit. It allows you to build your Angular application to a build artifact that can be hosted online. There are some key differences:

  • Supports Custom Webpack Configurations
  • Supports Incremental Building
• 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

  The webpack-server executor is very similar to the standard server builder provided by the Angular Devkit. It is usually used in tandem with @nrwl/angular:webpack-browser when your Angular application uses a custom webpack configuration and NgUniversal for SSR.

• module-federation-dev-ssr

  The module-federation-dev-ssr executor is reserved exclusively for use with host Module Federation applications that use SSR. It allows the user 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.