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!

Photo by Andrew Pons on Unsplash

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 :

Angular Schematics

I really like schematics to scaffold my project. Here is my minimal structure for Angular projects :

My minimal Angular project structure

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 :

Atomic Design Pattern: How to structure your React application

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:

1. Add a shared folder containing the most generic (common) components decomposed according to ADP.
2. Add a feature-named folder which will…