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:
- Generate a new library to set up all the config files
- Move the code from the existing folder into the new library
- 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.
- Identify the folders that might make sense to separate into their own library
- In each folder, create a
project.jsonfile with the following contents:
2 "name": "[name_of_the_folder]"
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
Clean upDO 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.
- Delete the empty
- Make new libraries for any folders that were marked to be extracted into new libraries.