Move you angular cli app to Nx

#angular #showdev #webdev

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

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

Environments to a library can be found here
Components to a library can be found here
Global Services to a library here
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

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