Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 25, 2021 12:48 am GMT

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
  • 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.


Original Link: https://dev.to/this-is-angular/move-you-angular-cli-app-to-nx-3ej4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To