Angular Plugin

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 Jest, Cypress, Karma, Protractor, and Storybook.
Helper services, and functions to use along with NgRx libraries.
Scaffolding for upgrading AngularJS applications.
Scaffolding for creating buildable libraries that can be published to npm.
Utilities for automatic workspace refactoring.

Adding the Angular plugin

Adding the Angular plugin to a workspace can be done with the following:

#yarn
yarn add -D @nrwl/angular

#npm
npm install -D @nrwl/angular

Angular Projects in an Nx Workspace

Building Angular applications within an Nx workspace is similar to building within a vanilla Angular CLI workspace, with a few differences.

Jest is used as the default unit test runner, configurable in the generators section of the workspace configuration file.
Cypress is used as the default E2E test runner, configurable in the generators section of the workspace configuration.
E2E tests are included in a separate project from the Angular application itself.
The Nx CLI delegates common commands such as build, serve, test, lint, and e2e to the Angular CLI.

The file structure for an Angular application looks like:

myorg/
├── apps/
│   ├── myapp/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   ├── assets/
│   │   │   ├── environments/
│   │   │   ├── favicon.ico
│   │   │   ├── index.html
│   │   │   ├── main.ts
│   │   │   ├── polyfills.ts
│   │   │   ├── styles.scss
│   │   │   └── test.ts
│   │   ├── browserslist
│   │   ├── jest.conf.js
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── tslint.json
│   └── myapp-e2e/
│       ├── src/
│       │   ├── fixtures/
│       │   │   └── example.json
│       │   ├── integration/
│       │   │   └── app.spec.ts
│       │   ├── plugins/
│       │   │   └── index.ts
│       │   └── support/
│       │       ├── app.po.ts
│       │       ├── commands.ts
│       │       └── index.ts
│       ├── cypress.json
│       ├── tsconfig.e2e.json
│       ├── tsconfig.json
│       └── tslint.json
├── libs/
├── tools/
├── angular.json
├── nx.json
├── package.json
├── tsconfig.json
├── tslint.json
└── README.md

Executors / Builders

package - Bundles artifacts for a buildable library that can be distributed as an NPM package.

Generators

application - Create an Angular application
downgrade-module - Setup Downgrade Module
karma - Add karma configuration to a workspace
karma-project - Add karma testing to a project
library - Create an Angular library
move - Move an Angular application or library to another folder within the workspace
ngrx - Add and use NgRx for state management
stories - Create stories/specs for all components declared in a library
storybook-configuration - Setup configuration for Storybook
upgrade-module - Add an upgrade module

Public API

DataPersistence - Angular Service that provides convenience methods for common operations of persisting data.
fetch - Handles data fetching, and correct ordering of fetching using NgRx Effects
navigation - Handles data fetching based on navigating to a certain component using NgRx Effects
optimisticUpdate - Handles optimistic updates (updating the client first) using NgRx Effects.
pessimisticUpdate - Handles pessimistic updates (updating the server first) fetching using NgRx Effects. NxModule - An NgModule used to register the Angular providers, including DataPersistence.