I’ve heard this question several times over the past few weeks, so I’m writing a blog post about it. At first, I saw this question as similar to asking someone, “What is your favorite color?” because I believe that every single person/dev team has their own opinions and preferences.
That said, I realized people ask that question because of possible misconceptions about how Angular works, making this topic much more interesting. Also, we’re lucky enough to have an official Angular style guide to help us make informed decisions about it.
Here is my take on that topic in a Q&A format:
To the Angular compiler, it doesn’t matter. Whether you have ten files or 10,000, the output of a compiled Angular project remains the same, with no more HTML/CSS files, folders, etc. Instead, we end up with this:
One index.html, one main.js, polyfills.js, and styles.css. No matter how many files and folders you have, that’s what you’re ending up with. The point is that optimizing the number of files/folders will not make your application run faster in a browser because such a browser will never see any of these files/folders.
To fellow code maintainers and developers, a single folder with 1,000 files in it isn’t manageable, and neither are deeply nested folder hierarchies. Keep reading for how to solve that.
The main idea of the Angular style guide is to group files by feature. Do you have a LoginComponent, a LoginService, and a LoginHttpInterceptor or guard? Put them in the login folder.
The Angular team justifies this approach as follows:
To confirm your intuition about a particular structure, ask: Can I quickly open and start work in all of the related files for this feature?
Keeping related files near each other in an intuitive location saves time. A descriptive folder structure makes a world of difference to you and the people who come after you.
What if we end up with too many files in a single folder? This leads us to the following question:
I love this rule from the Angular style guide:
Do keep a flat folder structure as long as possible.
Consider creating sub-folders when a folder reaches seven or more files.
A folder with just a few files is easy to scan and manage. The style guide justifies that approach as follows:
On the other hand, psychologists believe that humans start to struggle when the number of adjacent interesting things exceeds nine. So, when a folder has ten or more files, it may be time to create subfolders.
So, whether you use seven, nine, or ten as a breaking point, it makes sense to start creating subfolders when too many files clutter a single folder.
The short answer is no. The rule of one states that it is best to have only one “thing” per file, such as one component, one directive, or one service. That said, if you define a type or interface only used in that file, it makes sense to define it in the same place rather than create a separate file.
On that topic, remember that interfaces are better than classes for describing type information because they do not get compiled into anything (like union types). Thus, they bring type safety to your code without making your production code bigger.
I knew you’d ask about modules. Most major libraries and frameworks (Angular, Angular Material, NgRx, etc.) are switching to everything being standalone, meaning not using NgModules anymore, so I suggest doing the same.
From a developer perspective, the primary purpose of modules was lazy loading, but that purpose has mostly disappeared since standalone components can be lazy-loaded with more granularity (component instead of an entire module) and even used in deferred blocks.
As a result, if you use modules to organize things by feature, a basic feature folder will accomplish that task with no boilerplate code and fewer problems (who likes circular module dependencies?). If you use modules to share some code with others, then standalone features allow more granular imports, which improve performance. And if you use modules for lazy-loading, well, it’s just much more complex and less granular than with standalone components or defer blocks.
My name is Alain Chautard. I am a Google Developer Expert in Angular and a consultant and trainer at Angular Training, where I help web development teams learn and become comfortable with Angular.
If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and the Weekly Angular Newsletter for helpful Angular tips, updates, and tutorials.
