in

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.



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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Greuther Fürth thumbnail

Greuther Fürth

An awesome CLI tools for scaffolding apps that was made with Vue.js