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:-
ng add @nrwl/workspace --preserveAngularCLILayout
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.
- feat: migrate to nx
- fix: add global services and global components lib
- feat: move all pages to nx libs
- feat: move global styles to a library
- feat: convert into single file components
Commits
Let me know if you ant to see any new experiments in the repo.
Originally published at https://ajitblogs.com on September 25, 2021.