Migrating an Angular CLI workspace to an Integrated Nx Monorepo

To take advantage of Nx's monorepo features provided by Nx and the Nx Angular plugin, you can also perform a migration from an Angular CLI to an Integrated Nx Monorepo with the command:

ng add @nrwl/angular@<version_number>

This installs the @nrwl/angular (or @nrwl/workspace) package into your workspace and runs a generator (or schematic) to transform your workspace. The generator applies the following changes to your workspace:

Installs the nx and @nrwl/workspace packages.
Moves your applications into the apps folder, and updates the relevant file paths in your configuration files.
Moves your e2e suites into the apps/<app name>-e2e folder, and updates the relevant file paths in your configuration files.
Moves your libraries into the libs folder, and updates the relevant file paths in your configuration files.
Updates your package.json scripts to use nx instead of ng.
Splits your angular.json into project.json files for each project with updated paths.

After the changes are applied, your workspace file structure should look similar to the one below:

<workspace name>/
├── apps/
│   └─ <app name>/
│       ├── src/
│       │   ├── app/
│       │   ├── assets/
│       │   ├── favicon.ico
│       │   ├── index.html
│       │   ├── main.ts
│       │   └── styles.css
│       ├── project.json
│       ├── tsconfig.app.json
│       └── tsconfig.spec.json
├── libs/
│   └── <lib name>/
│       ├── src/
│       ├── ng-package.json
│       ├── package.json
│       ├── project.json
│       ├── README.md
│       ├── tsconfig.lib.json
│       ├── tsconfig.lib.prod.json
│       └── tsconfig.spec.json
├── tools/
├── .editorconfig
├── .gitignore
├── .prettierignore
├── .prettierrc
├── karma.conf.js
├── nx.json
├── package.json
├── README.md
└── tsconfig.base.json

Your workspace is now powered by Nx! You can verify that your application still runs as intended:

To serve, run nx serve <app name>.
To build, run nx build <app name>.
To run unit tests, run nx test <app name>.
To see your project graph, run nx graph.

Your project graph will grow as you add and use more applications and libraries. You can add the --watch flag to nx graph to see the changes in-browser as you add them.

Older Versions of Angular

To migrate to legacy versions of Nx prior to Nx 13.10, run the command:

ng add @nrwl/workspace@<version_number>

Refer to the Nx and Angular Version Compatibility Matrix for matching Angular and Nx versions.

Support for workspaces with multiple applications and libraries was added in Nx v14.1.0. If you are migrating using an older version of Nx, your workspace can only contain one application and no libraries in order to use the automated migration, otherwise, you can still migrate manually.

Modified Folder Structure

The automated migration supports Angular CLI workspaces with a standard structure, configurations and features. If your workspace has deviated from what the Angular CLI generates, you might not be able to use the automated migration and you will need to manually migrate your workspace.

Currently, the automated migration supports workspaces using the following executors (builders):

@angular-devkit/build-angular:browser
@angular-devkit/build-angular:dev-server
@angular-devkit/build-angular:extract-i18n
@angular-devkit/build-angular:karma
@angular-devkit/build-angular:ng-packagr
@angular-devkit/build-angular:protractor
@angular-devkit/build-angular:server
@angular-eslint/builder:lint
@cypress/schematic:cypress
@nguniversal/builders:prerender
@nguniversal/builders:ssr-dev-server

Support for other executors may be added in the future.

Learn More

Learn more about the advantages of Nx in the following guides: