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

  • package

    Builds and packages an Angular library to be distributed as an NPM package. It supports 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

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

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

  • file-server

    Serve a web application from a folder.

Generators

  • add-linting

    Adds linting configuration to an Angular project.

  • application

    Creates an Angular application.

  • component

    Generate an Angular Component.

  • component-cypress-spec

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

  • component-story

    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.

  • init

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

    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