Identify Dependencies Between Folders

As projects grow in size, you often need to split out a particular folder in that project into its own library. In order to do this properly, you need to:

  1. Generate a new library to set up all the config files
  2. Move the code from the existing folder into the new library
  3. Clean up paths that were broken when you moved the code

If you're not sure which code you want to split into a new library, this can be a tedious process to repeat multiple times.

Here is a technique to use during the exploration phase to help identify which code makes sense to separate into its own library.

Requires Nx 15.3

Nx 15.3 introduced nested projects, which are necessary for Nx to be aware of project.json files inside of an existing project.

Set up

  1. Identify the folders that might make sense to separate into their own library
  2. In each folder, create a project.json file with the following contents:
project.json
1{ 2 "name": "[name_of_the_folder]" 3} 4

Analysis

Now, run nx graph to view the dependencies between the folders. In the full web view (not in the graph below), you can click on the dependency lines to see which specific files are creating those dependencies.

Here is a graph that was created when doing this exercise on the Angular Jump Start repo. To reproduce this graph yourself, download the repo, run nx init and then add project.json files to the folders under /src/app.

Clean up

DO NOT COMMIT

Do not commit these empty project.json files. They remove files from the cache inputs of the parent project without creating new test or build targets in place to cover those files. So testing and building will not be triggered correctly when those files change.

  1. Delete the empty project.json files.
  2. Make new libraries for any folders that were marked to be extracted into new libraries.