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.base.json
├── tslint.json
└── README.md
See Also
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.