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 provides:

  • Integration with libraries such as Storybook, Jest and Cypress.
  • Generators to help scaffold code quickly, including:
    • Micro Frontends
    • Libraries, both internal to your codebase and publishable to npm
    • Upgrading AngularJS applications
    • Single Component Application Modules (SCAMs)
  • NgRx helpers.
  • 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 the Angular plugin

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.

Adding the Angular plugin to an existing Nx workspace can be done with the following:

❯

npm install -D @nx/angular

Nx 15 and lower use @nrwl/ instead of @nx/
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

Nx 15 and lower use @nrwl/ instead of @nx/

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

Nx 15 and lower use @nrwl/ instead of @nx/

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

Nx 15 and lower use @nrwl/ instead of @nx/

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 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.

  • 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

    The dev-server executor is very similar to the standard dev-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.

  • 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-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.

  • 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.

  • 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.