Angular Project Structure

1. Best Practice for an Angular Project Structure
2. How to Define a Highly Scalable Project Folder
3. Conclusion

It is not an understatement when it is said that being organized is one of the core values of a programmer. Besides writing clean and concise codes, it is excellent practice to cultivate the habit of creating projects with well-structured component folders.

Best Practice for an Angular Project Structure

Why is it good to keep an excellent folder structure for Angular projects?

1. Keeping an organized folder structure portrays you as an experienced coder who knows the value of keeping things organized.
2. A good structure is easy to read and maintain, especially when sharing codes or building projects; it makes it easy for each person to locate files we want to work on.
3. It makes detecting and correcting bugs in our applications easy.
4. An organized project folder is ideal when building large-scale applications; in this scenario, it is highly critical that we keep a well-organized project structure because we will be creating host files, components and services. And trying to find a particular file in a haystack of unorganized folders could be hellish and frustrating.

Usually, the default folder tree provided by Angular CLI should be enough for simple applications, but how do we create a scalable file structure when building a large-scale application?

How to Define a Highly Scalable Project Folder

1. Organize folders and subfolders by features

   Applications we create have different components that perform different functions; we should try to create folders according to the feature of each component.

   For example, if we inject a service into an application, we should create a service folder; if we have an app that makes users log in, we should create a login folder that deals with user logins.

   If we need to create some other components that directly relate to the login folder, it is wise to create a subfolder inside the login folders.

2. Naming files and folders

   When looking for files in any situation, we first look at the names of folders that closely relate to that file name.

   If you are looking for music files, we will want to look at the music folder first. This same scenario applies to how we name our files and components.

   When creating components inside a folder, we can name the files using the hyphen style. For instance, when creating files inside a to-do list folder, we can name the file edit-todo.component.ts.

   This way, it’s easy for us to relocate the files if we want to correct a bug; it also makes it easy for our collaborators to look through our codes.

3. Design a Flat Folder Structure

   While it is excellent practice to create subfolders for closely related components, we should try to keep the subfolders as few as possible.

   We should try as much as possible to ensure the subfolders don’t exceed nine subfolders, numbers higher than this will cause us to quickly tire while combining the components.

4. Bootstrapping

   Another thing to consider to attain a highly scalable project folder is to place the bootstrapping logic inside the main.ts file of the project application.

   Avoid placing the application logic inside the file. Error handling can also be placed in the bootstrap logic.

Conclusion

Ideally, there’s no universal approach to setting up an effective folder structure for an Angular project, but the above steps can be adopted.