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/

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