@nrwl/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, Cypress, Karma, and Protractor.
  • 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

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

yarn add -D @nrwl/angular
npm install -D @nrwl/angular

Using the Angular Plugin

Generating an application

It's straightforward to generate an Angular application:

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

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.

  • file-server

    Serves a static web application from a folder.

  • 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

  • webpack-dev-server

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

  • convert-tslint-to-eslint

    Converts a project from TSLint to ESLint.

  • downgrade-module

    Sets up a Downgrade Module.

  • initInternal

    Initializes the @nrwl/angular plugin.

  • karma

    Adds Karma configuration to a workspace.

  • karma-project

    Adds Karma configuration to a project.

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

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

  • upgrade-module

    Sets up an Upgrade Module.

  • web-worker

    Creates a Web Worker.

  • change-storybook-targets

    Change storybook targets for Angular projects to use @storybook/angular executors