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.
- ESLint is used as the default linter, configurable in the generators section of the workspace configuration.
- Jest is used as the default unit test runner, configurable in the generators section of the workspace configuration.
- 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/
β β β β βββ app.component.html
β β β β βββ app.component.scss
β β β β βββ app.component.spec.ts
β β β β βββ app.component.ts
β β β β βββ app.module.ts
β β β βββ assets/
β β β βββ environments/
β β β β βββ environment.prod.ts
β β β β βββ environment.ts
β β β βββ favicon.ico
β β β βββ index.html
β β β βββ main.ts
β β β βββ polyfills.ts
β β β βββ styles.scss
β β β βββ test-setup.ts
β β βββ .browserslistrc
β β βββ .eslintrc.json
β β βββ jest.config.js
β β βββ tsconfig.app.json
β β βββ tsconfig.editor.json
β β βββ tsconfig.json
β β βββ tsconfig.spec.json
β βββ myapp-e2e/
β βββ src/
β β βββ fixtures/
β β β βββ example.json
β β βββ integration/
β β β βββ app.spec.ts
β β βββ plugins/
β β β βββ index.ts
β β βββ support/
β β βββ app.po.ts
β β βββ commands.ts
β β βββ index.ts
β βββ .eslintrc.json
β βββ cypress.json
β βββ tsconfig.e2e.json
β βββ tsconfig.json
βββ libs/
βββ tools/
β βββ generators/
β βββ tsconfig.tools.json
βββ .editorconfig
βββ .eslintrc.json
βββ .gitignore
βββ .prettierignore
βββ .prettierrc
βββ angular.json
βββ decorate-angular-cli.js
βββ jest.config.js
βββ jest.preset.js
βββ nx.json
βββ package.json
βββ README.md
βββ tsconfig.base.json
See Also
Executors / Builders
- 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 - Builds a browser application with support for incremental builds and custom webpack configuration.
Generators
- application - Creates an Angular application.
- convert-tslint-to-eslint - Converts a project from TSLint to ESLint.
- downgrade-module - Sets up a Downgrade Module.
- karma - Adds Karma configuration to a workspace.
- karma-project - Adds Karma configuration to a project.
- library - Creates an Angular library.
- move - Moves an Angular application or library to another folder within the workspace and updates the project configuration.
- ngrx - Adds NgRx support to an application or library.
- setup-mfe - Generate a Module Federation configuration for a given Angular application.
- stories - Creates stories/specs for all components declared in a project.
- storybook-configuration - Adds Storybook configuration to a project.
- storybook-migrate-defaults-5-to-6 - Generates default Storybook configuration files using Storybook version >=6.x specs, for projects that already have Storybook instances and configurations of versions <6.x.
- storybook-migrate-stories-to-6-2 - Migrates stories to match the new syntax in v6.2 where the component declaration should be in the default export.
- upgrade-module - Sets up an Upgrade Module.
- web-worker - Creates a Web Worker.
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) using NgRx Effects.NxModule
- An NgModule used to register the Angular providers, including DataPersistence.