Transitioning an Angular CLI Project to an Nx Monorepo

Your feedback on these updates is greatly appreciated.
Repository - https://github.com/ajitsinghkaler/devto-clone

Live deployment on Firebase - https://dev-toclone.firebaseapp.com/

There were no updates last week due to illness.

The majority of this week's effort went into migrating the clone into an Nx monorepo. During the conversion, I gathered several insights worth sharing on how to shift an Angular CLI application to an Nx structure.

The following steps outline the conversion process from an Angular CLI project to Nx:

  • Execute the automatic Nx generator on your application, which handles the transformation from an Angular CLI project into an Nx workspace.
ng add @nrwl/workspace --preserveAngularCLILayout
Enter fullscreen mode Exit fullscreen mode
  • Following that, keep in mind that the application should never directly import from the library. Common elements like environments, shared models, components, and services should be relocated to a completely separate library.

Examples of these migrations include:

  1. Environments moved to a library - see this example

  2. Reusable components placed in a library - see this example

  3. Global services organized into a library - see this example

  4. Global styles centralized in a library - see this example

  • To perform these moves, generate a fresh library using nx g lib <lib-name>, then relocate all relevant files to that library and make everything available by exporting through the index.ts file.

  • For importing dependencies, check the tsconfig.base.json file where paths are defined; that's where you can identify the correct shorthand property for each import.

  • Once the above is complete, you can break down your modules into smaller libraries, separating concerns like UI and data-access layers.

  • The division of libraries is up to you; it mirrors the Angular module system, allowing you to make modules as large or as small as necessary.

  • Be cautious to avoid circular dependencies.

I also transitioned a large number of my components to single-file components. This made the code easier to read, and for many of my components, having multiple files wasn't necessary.

Starting next time, I plan to introduce unit tests, integration tests, and e2e tests, after which this project will be considered complete.

Commits made:

  1. feat: migrate to nx

  2. fix: add global services and global components lib

  3. feat: move all pages to nx libs

  4. feat: move global styles to a library

  5. feat: convert into single file components

Feel free to let me know if there are any specific experiments you'd like to see in this repository.