Angular Schematics : How to create an empty folder ?
Angular Schematics are so powerful to automate some tree actions on your project. But creating new empty folder is not that easy… In fact, it is!
--
Quoting the Angular doc :
A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code.
You can find more info about schematics here :
I really like schematics to scaffold my project. Here is my minimal structure for Angular projects :
It’s very explanatory and you can notice I’m using the Atomic Design Pattern.
Atomic Design Pattern (ADP)
is a powerful way of composing your components into several levels of usage. You can find a deeper article dealing with it here :
TL;DR : It helps to decouple your components to increase testability, readability. The top level components use the lowest ones.
However this pattern may have some “detractors” because this hierarchy is not feature-oriented. It means that if you have components dealing with user-related parts of your app, they will be drowned among all other components.
To overcome this obstacle, you have several options:
- Add a
shared
folder containing the most generic (common) components decomposed according to ADP. - Add a
feature-named
folder which will…