DEV Community

Cover image for Angular Moving Folders

Angular Moving Folders

John Peters
Lit-Html or Svelte?
Updated on ・1 min read


When following the SRP principal, we will have lots of small "generic" components, but projects don't always start that way.

Until we train ourselves, our project is likely to have monolithic code patterns needing to be broken down.

Breaking Components Down

We want to refactor monolithic code by splitting out anything not doing just one thing within that component. We want to "get to generic".

As we create these "generic" components, we want to put them into a new folder... e.g. "Common" for common/reusable components. By the end of your project, you will have this folder structure.


All of the generic components are in the folder named "Common". This is a great way to start your reusable components library.

Auto Import Updating

Visual Studio Code allows you to move components around in your project, and it will update all of the import statements automatically.

Sometimes it seems to miss a few, no problem, just move the component back to starting location and then back again to new folder, this usually fixes App.Router's imports. Note this technique also works for moving entire folders!

Time Factor?

Today, I just moved in 19 components into the "Common" folder, it took me 10 minutes to get it done!

Discussion (0)