Adding an existing angular project to an existing NX project

As of version 19.8, the Nx CLI has an import command that can be used to add an existing project to a monorepo. It should automatically update the configuration required to integrate the project into the monorepo, such as replacing the angular.json file with a project.json file, and merging the dependencies in the package.json file.

The command can be used as follows:

nx import [sourceRepository] [destinationDirectory]

The sourceRepository parameter can be a URL to a repository or another directory, and the destinationDirectory parameter should be the project's new path within the monorepo. For example:

nx import https://github.com/example/todo.git apps/todo

More info is available in the Nx documentation.

For prior versions of Nx, the process is a bit more complicated but the general idea is as follows, presuming you are using Git:

• Before starting, make sure there are no dependency conflicts between projects and the both the source and the monorepo are using the same versions of Angular as well as other dependencies they may share.
• Create a new Git branch in the source project. On that branch, move all the files into a subdirectory that matches the path the app will have once it is merge into the monorepo, such as apps/todo.
• In the monorepo, add the source project as a new Git remote. You can then merge the branch with the code in a subdirectory, into the monorepo. (How to import a Git repo into another.)
• With the code merged into the monorepo, you then need to adapt the configuration. Rename angular.json to project.json, merge the dependencies for the source project into the monorepos packages.json and update the ESLint and TS config files to inherit the base config for the monorepo. You can compare the config with the config for your other apps or generate a new app to use as a reference to ensure everything is set up correctly.