DEV Community

Cover image for Move you angular cli app to Nx
Ajit Singh for This is Angular

Posted on • Originally published at ajitblogs.com

Move you angular cli app to Nx

Help me improve these updates by giving suggestions.
Github Repo - https://github.com/ajitsinghkaler/devto-clone

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Last week I was sick so there was no updates last week.

This week I mostly focused on my moving my clone to Nx monorepo. While converting it here are some of my findings on how to convert an Angular cli app to Nx monorepo

To convert an angular cli app to nx follow the steps below:-

  • Run the automatic nx generator in you app whoch will convert the angular cli project to an nx workspace
ng add @nrwl/workspace --preserveAngularCLILayout
Enter fullscreen mode Exit fullscreen mode
  • After that remember project should never be imported into the library. Environments, common models, common components, common services move to an entirely different lib.

Example of moving

  1. Environments to a library can be found here

  2. Components to a library can be found here

  3. Global Services to a library here

  4. Global Styles here here

  • To move them to a library generate anew library by nx g lib <lib-name> after that move everything to lib and export everything via the index.ts file.

  • To import the dependencies the paths are added to the tsconfig.base.json from there you can check what shorthand property to use for what imports.

  • When you are done with all this you can now divide your modules into smaller libs like a module into its ui, data-access etc.

  • Dividing the libs is on you its just like the angular module system you can make any module as big as possible and and small as possible.

  • Just remember don't create circular dependencies.

I also moved most of my components to single file components as it was easier to read and most of my components don't need to be multiple file.

Form next time I'll start adding unit tests and integration tests, e2e tests after that this project will be done.

Commits

  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

Let me know if you ant to see any new experiments in the repo.

Discussion (5)

Collapse
timsar2 profile image
timsar2 • Edited

Mate, make a post about how nx make life easier using nx, ngrx and RTK Query please if posible for you.

Collapse
ajitsinghkaler profile image
Ajit Singh Author

What is RTK ?

Collapse
timsar2 profile image
timsar2 • Edited

I mean: Redux Tool Kit Query
dev.to/brandontroberts/cousins-pla...

Thread Thread
ajitsinghkaler profile image
Ajit Singh Author

Can you provide me a project on which I can have a look at it If not creating a demo project with Ngrx and RTK may take a lot of time.

Because I have not used RTK how can I suggest how it makes life better if have not used it

Thread Thread
timsar2 profile image
timsar2

i'm so so :D, I need to spend time to learn it ;)