Package

@nrwl/angular

Angular logo

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.

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.

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

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

  • 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

    Note: This 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

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

    Generate a Module Federation configuration for a given 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.

  • upgrade-module

    Sets up an Upgrade Module.

  • web-worker

    Creates a Web Worker.