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.