Adding multiple existing Angular projects into an NX workspace/monorepo

Question

We are and Angular shop and are considering using a NX to manage a monorepo. I've seen many guides and articles on converting and existing Angular CLI workspace to an NX workspace.

So our approach would be to take our most complicated project and convert that to an NX workspace. The next step would then to add our other Angular projects to this new workspace.

How would I go about doing this? Would I have to basically use the NX cli to create a blank app and then copy all of our code into the blank app? Then we would have to npm install all of the packages that this new project needs?

Answer 1

I would actually start with a simple project and try to find some best practices that you want to use in your organization. Like Angular itself, Nx Workspace is opinionated but only to a certain extend. You still have the responsibility to decide how separate your code into logical units.

One main thing to keep in mind is that Nx works with the idea of apps and libs . Ideally an app is very small, and most if not all the actual functionality lives in libs . In Angular that generally means you lazy-load components that live in libs.

With regards to how to structure the libs, there are different ways to go about it. You can read this blogpost to get some ideas.

Also, keep in mind that working a mono repo does not mean you have to have all of your companies code in that single repo. For example, I work with a lot of different client projects and it makes way more sense to have a Nx Workspace for each of the client projects. Then if I need to share code between projects I make sure to publish it to npm and consider it a third-party library.

How would I go about doing this? Would I have to basically use the NX cli to create a blank app and then copy all of our code into the blank app? Then we would have to npm install all of the packages that this new project needs?

Yes, and I would personally start with a complete blank slate.

You can do so by creating an Nx Workspace with the empty preset, and make sure to select the Angular CLI:

$ yarn create nx-workspace <project-name> 

Next, move into your directory and add the Nrwl Angular package:

$ cd <project-name>
$ yarn add -D @nrwl/angular

From that moment on, you can generate apps and libs like so:

ng g @nrwl/angular:app <app-name>
ng g @nrwl/angular:lib <lib-name>

You can now start moving over code from your previous project into the lib folder, and reference that code from your app . If you already have an existing module structure in Angular that works well, you can simply create a lib for each of those modules.

I hope this helps.