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!

Adrien Miquel
5 min readDec 12, 2019

--

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 :

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 :

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…

--

--

Adrien Miquel

Sr Frontend Engineer performing with Vue, TS/JS, GitLab | Writing articles monthly